如何解决按键转义按钮状态上的全屏按钮不会更改为关闭
在此处输入代码
function fullscreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener('fullscreenchange',FSHandler);
document.addEventListener('webkitfullscreenchange',FSHandler);
document.addEventListener('mozfullscreenchange',FSHandler);
document.addEventListener('MSFullscreenChange',FSHandler);
function FSHandler() {
// FS = FullScreen
if (!document.fullscreenElement
&& !document.webkitIsFullScreen
&& !document.mozFullScreen
&& !document.msFullscreenElement) {
document.getElementById("myonoffswitch ").checked = false;
} else {
document.getElementById("myonoffswitch ").checked = true;
}
}.myonoffswitch {
--color-invert: rgba(0,255,.5);
--width: 150px;
--height: 150px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: var(--width);
height: var(--height);
transform: scale(0.33);
transform-origin: 33% 0;
}
.myonoffswitch .button {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: rgba(55,55,0.77);
border-radius: 15px;
}
.myonoffswitch .button:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: radial-gradient(circle closest-side,var(--color-invert),transparent);
filter: blur(20px);
opacity: 0;
transition: opacity 1s ease,transform 1s ease;
transform: perspective(1px) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.myonoffswitch .button .power-on,.myonoffswitch .button .power-off {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
fill: none;
stroke: var(--color-invert);
stroke-width: 8px;
stroke-linecap: round;
stroke-linejoin: round;
}
.myonoffswitch .button .power-on .line,.myonoffswitch .button .power-off .line {
opacity: 0.2;
}
.myonoffswitch .button .power-on .circle,.myonoffswitch .button .power-off .circle {
opacity: 0.2;
transform: rotate(-58deg);
transform-origin: center 80px;
stroke-dasharray: 220;
stroke-dashoffset: 40;
}
.myonoffswitch .button .power-on {
filter: drop-shadow(0px 0px 6px rgba(255,0.8));
}
.myonoffswitch .button .power-on .line {
opacity: 0;
transition: opacity 0.3s ease 1s;
}
.myonoffswitch .button .power-on .circle {
opacity: 1;
stroke-dashoffset: 220;
transition: transform 0s ease,stroke-dashoffset 1s ease 0s;
}
.myonoffswitch input {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.myonoffswitch input:checked + .button:after {
opacity: 0.15;
transform: scale(2) perspective(1px) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: opacity 0.5s ease,transform 0.5s ease;
}
.myonoffswitch input:checked + .button .power-on,.myonoffswitch input:checked + .button .power-off {
-webkit-animation: click-animation 0.3s ease forwards;
animation: click-animation 0.3s ease forwards;
transform: scale(1);
}
.myonoffswitch input:checked + .button .power-on .line,.myonoffswitch input:checked + .button .power-off .line {
-webkit-animation: line-animation 0.8s ease-in forwards;
animation: line-animation 0.8s ease-in forwards;
}
.myonoffswitch input:checked + .button .power-on .circle,.myonoffswitch input:checked + .button .power-off .circle {
transform: rotate(302deg);
}
.myonoffswitch input:checked + .button .power-on .line {
opacity: 1;
transition: opacity 0.05s ease-in 0.55s;
}
.myonoffswitch input:checked + .button .power-on .circle {
transform: rotate(302deg);
stroke-dashoffset: 40;
transition: transform 0.4s ease 0.2s,stroke-dashoffset 0.4s ease 0.2s;
}
@-webkit-keyframes line-animation {
0% {
transform: translateY(0);
}
10% {
transform: translateY(10px);
}
40% {
transform: translateY(-25px);
}
60% {
transform: translateY(-25px);
}
85% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes line-animation {
0% {
transform: translateY(0);
}
10% {
transform: translateY(10px);
}
40% {
transform: translateY(-25px);
}
60% {
transform: translateY(-25px);
}
85% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@-webkit-keyframes click-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes click-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
}<div id="myonoffswitch" name="myonoffswitch" style="position:fixed;top:0px;left:-33px;z-index:101010;" title="ON/OFF Fullscreen" class="myonoffswitch">
<input onclick="fullscreen()" type="checkbox" />
<div class="button">
<svg id="power-off" class="power-off">
<use xlink:href="#line" class="line" />
<use xlink:href="#circle" class="circle" />
</svg>
<svg id="power-on" class="power-on">
<use xlink:href="#line" class="line" />
<use xlink:href="#circle" class="circle" />
</svg>
</div>
</div>
<!-- SVG -->
<svg xmlns="https://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="https://www.w3.org/2000/svg" viewBox="0 0 150 150" id="line">
<line x1="75" y1="34" x2="75" y2="58"/>
</symbol>
<symbol xmlns="https://www.w3.org/2000/svg" viewBox="0 0 150 150" id="circle">
<circle cx="75" cy="80" r="35"/>
</symbol>
</svg>我在互联网上发现了这个全屏 javascript，但我无法“调整它”。 如果我点击退出按钮，Svg 按钮不会变成关闭状态。当按下键转义时，我想实现 svg 按钮变为关闭状态。我在 javascript 代码的末尾添加了一个事件侦听器仍然关闭状态不起作用...
网站在这个地址上 https://www.forster.si/Titan/index.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
