✍ 📁 🙈 🙉 🙊 : fullScreen 全螢幕顯示的

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 測試左單右單