✍ 📁 🙈 🙉 🙊 : script 螢幕全屏 Fullscreen requestFullscreen()

script requestFullscreen() 全螢幕

<div id="mmm">
  <pre>  <<c>div id="mmm">  <button id="B6" onclick="Fullscreen()" > fullscreen </button>
     整個頁面或某個區塊變成全螢幕的形式，
     呼叫 全螢幕 elem.requestFullscreen()
     離開 全螢幕 document.exitFullscreen

<<c>script>
  function Fullscreen() {
    if (!window.screenTop && !window.screenY) {
          if ( mmm.requestFullscreen) 
             { mmm.requestFullscreen(); }
     else if ( mmm.msRequestFullscreen) 
             { mmm.msRequestFullscreen(); }
     else if ( mmm.mozRequestFullScreen)
             { mmm.mozRequestFullScreen(); } 
     else if ( mmm.webkitRequestFullscreen)
             { mmm.webkitRequestFullscreen(); }
     B6.innerHTML ="exitFullscreen" ; return; }

if ( document.exitFullscreen)
            { document.exitFullscreen(); } 
    else if ( document.mozCancelFullScreen)
            { document.mozCancelFullScreen(); }
    else if ( document.webkitCancelFullScreen)
            { document.webkitCancelFullScreen(); }
    else if ( document.msExitFullscreen) 
            { document.msExitFullscreen(); }
   B6.innerHTML ="fullscreen"
  }
  <<c>/script>

判斷現在是否全螢幕
    if (!window.screenTop && !window.screenY) {....}

css 全螢幕 設定 背景顏色
    #mmm:-webkit-full-screen {background-color: cornsilk;}
    #mmm:-moz-full-screen    {background-color: cornsilk;}
    #mmm:-ms-fullscreen      {background-color: cornsilk;}
    #mmm:fullscreen          {background-color: cornsilk;}

</pre>
</div>

if ( document.exitFullscreen)
           { document.exitFullscreen(); } 
   else if ( document.mozCancelFullScreen)
           { document.mozCancelFullScreen(); }
   else if ( document.webkitCancelFullScreen)
           { document.webkitCancelFullScreen(); }
   else if ( document.msExitFullscreen) 
           { document.msExitFullscreen(); }
   B6.innerHTML ="fullscreen "
}

</script>

#B6{ height:40px; width:180px ;
      font-size: 20px ;
      cursor: pointer ;
      color: black ;
      background-color: lightgray ;
      border-radius: 50%;
      box-shadow: 4px 4px #999 ;}

#B6:hover { background-color: gainsboro ;}

#B6:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

#B6{animation: mymove 1s infinite;}

@keyframes mymove { 60%  {color:crimson; }
                    80%  {color:yellow;  }
                    90%  {color:orange;  }
                    100% {color:brown;   }  }

pre     {font-size: 20px; }
h1{font-size: 30px;color : blue;font-weight : bold;text-align: center;}

B {font-weight : bold;color : blue;}
r {color:red}
</style>

.div-F:-webkit-full-screen {display:block}
.div-F:-moz-full-screen    {display:block}
.div-F:-ms-fullscreen      {display:block}
.div-F:fullscreen          {display:block}
</style>

</div>

</div>

<script>
function Mclick( xx,event){
var x = event.clientX;
var y = event.clientY;
var cw = document.body.clientWidth ;
var Mid = xx.parentElement  ;
var BTA = Mid.getElementsByClassName("BT") ;
if(x > cw/2){FTAA(xx) }
if(x < cw/2){FTLL(xx) }

//BTA[3].innerHTML = cw ;
//alert( y + "[]" + y);
}

function FPTs(id){
var Mid = id.parentElement
var PTL = Mid.getElementsByClassName("PT-img") ;
for(var x = 0; x < PTL.length ;x++){
PTL[x].setAttribute("title", x  ); }
//PTL[x].title= "end" ;
//DP.innerHTML =Mid.id;
}

//DP.innerHTML = Mid.id + " [" +  PTL.length + "] " + MsrcU ;
}

//* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *//

//*  +++++++++++++++++++++++++++++++++++++++++++++++++++ *//
function FTAA(xx) {
var Mid = xx.parentElement  ;
var PTL = Mid.getElementsByClassName("PT-img") ;
var BTA = Mid.getElementsByClassName("BT") ;
xx.title = parseFloat(xx.title)+1   ;
if(xx.title > PTL.length-1 ){xx.title = 1} 
  var Msrc = PTL[xx.title].src ;
  var MsrcU= Msrc.replace(/s100/i ,"s1600") ;
PTL[0].style.backgroundImage = 'url(' + MsrcU + ')';
PTL[0].title = PTL[xx.title].title ;
BTA[0].title = PTL[xx.title].title ;
BTA[1].title = PTL[xx.title].title ;
BTA[3].innerHTML = "[" + xx.parentElement.title + "] " + PTL[xx.title].title + " / " +PTL.length  ;
}

//*  ------------------------------------------- *//
function FTLL(xx) {
var Mid = xx.parentElement ;
var PTL = Mid.getElementsByClassName("PT-img") ;
var BTA = Mid.getElementsByClassName("BT") ;
xx.title = parseFloat(xx.title)-1   ;
if(xx.title == 0 ){xx.title = PTL.length-1 } 
  var Msrc = PTL[xx.title].src ;
  var MsrcU= Msrc.replace(/s100/i ,"s1600") ;
PTL[0].style.backgroundImage = 'url(' + MsrcU + ')';
PTL[0].title = PTL[xx.title].title ;
BTA[0].title = PTL[xx.title].title ;
BTA[3].innerHTML = "[" + xx.parentElement.title + "] " + PTL[xx.title].title + " / " +PTL.length  ;
//alert(PTL.length  );  
}

</script>

.div-F:-webkit-full-screen {display:block}
.div-F:-moz-full-screen    {display:block}
.div-F:-ms-fullscreen      {display:block}
.div-F:fullscreen          {display:block}
</style>

</div>

//BTA[3].innerHTML = cw ;
//alert( y + "[]" + y);
}

//DP.innerHTML = Mid.id + " [" +  PTL.length + "] " + MsrcU ;
}

//* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *//

</script>

Edit

#html #網頁格式 #style #div #requestFullscreen() 全螢幕 #exitFullscreen() 全螢幕 #css fullscreen

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

fullScreen 全螢幕顯示的

script requestFullscreen() 全螢幕

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單