requestFullscreen() 全螢幕

script requestFullscreen() 全螢幕

小程式 相簿

<

>

⛝

--

<style>.PT-M { width:100%; } .PT-img {height: 80px; width: 80px;cursor:pointer;} .div-F {background-image :url("https://xxx.jpg") ;background-size:contain ;background-position :50% 50% ; background-repeat :no-repeat ;background-color:lightgrey;display:none;display:none;display:none} .Bt1 {font-size:100px;position: fixed;cursor:pointer; top:50%;} .Bt2 {font-size:100px;position: fixed;cursor:pointer; top:50% ; right:0px;} .Bt3 {font-size:30px;position: fixed;cursor:pointer; top:0% ; right:0px; } .Bt4 {font-size:20px} .Bt1 , .Bt2 , .Bt3 , .Bt4 { color: white;font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black,2px 0 0 black,0 -2px 0 black;} .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 class="PT-M" id="PT20319747" title="AAAA" ><img class="FFimg" onerror="FPTs(this)" src="" > <div class="PT-img div-F" onclick="Mclick(this,event);"><div title="L" class="Bt1 BT" onclick="FTLL(this)"> < </div><div title="R" class="Bt2 BT" onclick="FTAA(this)"> > </div><div title="x" class="Bt3 BT" onclick="FTout()"> ⛝ </div><div title="x" class="Bt4 BT" onclick="FTout(this)">--</div> </div> <img class="PT-img" onclick="FTfu(this)" src="https://3.bp.blogspot.com/-FQbqOis1Lm8/WrNiJRYqKcI/AAAAAAAAPk4/nPmUwEKAd18CBnWj6l53Y2rodO9s3ZyxACKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0003.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://3.bp.blogspot.com/-0Zi3KpShOG4/WrNiJetv0mI/AAAAAAAAPk4/mr-MIWMRxQw48Ci3Ts6tdPZezv0yKeoUgCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0024.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-Vu4r4g49I0E/WrNiJc_yOrI/AAAAAAAAPk4/L3PvN8Yuq50en3gRSoTtmwowKlTrrXxkgCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0006.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://4.bp.blogspot.com/-xyJhCFZyNeQ/WrNiJZlB6rI/AAAAAAAAPk4/o_vKuipMg_wiSQpOdP3NjopUMTZoGzJXgCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0007.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://3.bp.blogspot.com/-55EYtqN1YbM/WrNiJUcFBiI/AAAAAAAAPk4/6ftPC2lnlAoCVrqFX71PcsbdXeRQDNfxACKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0008.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-UfjoYi0NN7Q/WrNiJc-1JuI/AAAAAAAAPk4/9r6HbfGIDCgaKZ4Tcu1uFVtwXot6LLxoACKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0004.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-X7uG4Dv0lYY/WrNiJcQRSFI/AAAAAAAAPk4/i1YtNXKdEUUw5ErsfLH7OVqfo0lZoyViQCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0005.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://3.bp.blogspot.com/-L3pe-Leh72E/WrNiJRocANI/AAAAAAAAPk4/Lo4W2GaY8J4JYEHi1IxlWwL1VwPugQUFQCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0009.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://4.bp.blogspot.com/-2Ni-hCwhrMo/WrNiJeJBX9I/AAAAAAAAPk4/4wvfi9v36h0CiD-E0o4qWTZW7rFifPD4QCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0010.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://4.bp.blogspot.com/-Rwp2mh_VYi8/WrNiJaSIQ0I/AAAAAAAAPk4/3GQdiW_lV60L59r6wVyw3kjMNNLxOH85QCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0015.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-5EjUObVbgzE/WrNiJU-rVDI/AAAAAAAAPk4/Ukg39Q3UdzgUMH4i0mwTjv1Re4Ux3UkiQCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0011.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-2jrH2s6BAXU/WrNiJUyJlYI/AAAAAAAAPk4/NRZ92hCQY7orOT8Qu4mZDllxsgVMHDzQgCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0013.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-_ipmDfzGkkQ/WrNiJYDmBZI/AAAAAAAAPk4/e4SxOQXxJqYQbC1188ZHhXUeeg7fwe7TQCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0012.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-p9qHpAaamPk/WrNiJdUwU3I/AAAAAAAAPk4/zKiYdREFbbQ6KzDSEalJdBUm238-rcOHQCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0016.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-AWQrbam1ME8/WrNiJeOaIvI/AAAAAAAAPk4/e8SPvAZxe6AsDg_F-WyEff5x4nF_2ANLgCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0017.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-iMaRbamGbhc/WrNiJYXhcII/AAAAAAAAPk4/_DoUymx2YUc_ZoBj8bDoyxcjfN-iBmddgCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0018.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://3.bp.blogspot.com/-62drd0ofopI/WrNiJQdHhwI/AAAAAAAAPk4/7DCE9U86V9sRVgQ3jDZnYsu4CfVUjW4_gCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0019.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-vc1iS9zWvss/WrNiJUhNZYI/AAAAAAAAPk4/8QfCyayeRLsk3jGIlpw3ec8LDfhFMqX9wCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0020.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://4.bp.blogspot.com/-ZztLTdPvDkA/WrNiJd38pfI/AAAAAAAAPk4/aQOXIzkdwMQkbUoHsqAbB61_LkUewqp6wCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0021.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://4.bp.blogspot.com/-gPDl8Lf_Aew/WrNiJQ5IkHI/AAAAAAAAPk4/8Fz62iZ71-k0qYvZqNx9hB7egZbyJ7ZSwCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0014.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-fkfcNOwXqY4/WrNiJYjUSLI/AAAAAAAAPk4/qppC-l2tZj8U-rLnRbtipfyT5mw2fQH7wCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0022.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-fk4dWDvmkF0/WrNiJbftezI/AAAAAAAAPk4/ez4f5zIKeXYyFQX1E195We-yWcJNhcJFQCKgBGAs/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0023.jpg" > <div id="DP"></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; } function FTfu(xx) { var Mid = xx.parentElement ; var PTL = Mid.getElementsByClassName("PT-img") ; var BTA = Mid.getElementsByClassName("BT") ; 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 ; var elem = PTL[0]; if (elem.requestFullscreen) {elem.requestFullscreen(); } else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();} else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen(); } else { } //DP.innerHTML = Mid.id + " [" + PTL.length + "] " + MsrcU ; } //* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *// function FTout(xx) { if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} } //* +++++++++++++++++++++++++++++++++++++++++++++++++++ *// 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>

00

<style>.PT-M { width:100%; } .PT-img {height: 80px; width: 80px;cursor:pointer;} .div-F {background-image :url("https://xxx.jpg") ;background-size:contain ;background-position :50% 50% ; background-repeat :no-repeat ;background-color:lightgrey;display:none;display:none;display:none} .Bt1 {font-size:100px;position: fixed;cursor:pointer; top:50%;} .Bt2 {font-size:100px;position: fixed;cursor:pointer; top:50% ; right:0px;} .Bt3 {font-size:30px;position: fixed;cursor:pointer; top:0% ; right:0px; } .Bt4 {font-size:20px} .Bt1 , .Bt2 , .Bt3 , .Bt4 { color: white;font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black,2px 0 0 black,0 -2px 0 black;} .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 class="PT-M" id="PT20319747" title="AAAA" ><img class="FFimg" onerror="FPTs(this)" src="" > <div class="PT-img div-F" onclick="Mclick(this,event);"><div title="L" class="Bt1 BT" onclick="FTLL(this)"> < </div><div title="R" class="Bt2 BT" onclick="FTAA(this)"> > </div><div title="x" class="Bt3 BT" onclick="FTout()"> ⛝ </div><div title="x" class="Bt4 BT" onclick="FTout(this)">--</div> </div> <img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-HX3GlOZqlwU/XohaKxvJqqI/AAAAAAAAvF8/6FMvkLdHFrkaL5R11YoqpyxZMFAzFdQwgCPcBGAYYCw/s100/inCollage_20191124_173415963_mh1574588854008.jpg" > <div style="display:none"><img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-rVE2l1XNRCE/XohaK5Zv8PI/AAAAAAAAvF8/g7Ha0O_NvhEllsXM74GZWNUSpX1PHhyDACPcBGAYYCw/s100/20191124_172832.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-6DKf8TcTtxE/XohaKyr7AlI/AAAAAAAAvF8/06_WGks_WAYd2qtDfNx1aTrhNlDaI36IwCPcBGAYYCw/s100/20191124_172810.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://4.bp.blogspot.com/-tZYAE19epFI/XohaK-uG3PI/AAAAAAAAvF8/jk4J_pNiOFE1RWazCEh_HOQX-U8zOUOHwCPcBGAYYCw/s100/IMG_20191118_142648_957.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-fn-e6FdwGdE/XohaK3pPVEI/AAAAAAAAvF8/5BFXKU2eeP0vGjOWG_eQxeFCquBEaMF5ACPcBGAYYCw/s100/20191124_172821.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-N_le5RKupj4/XohaKx-9R9I/AAAAAAAAvF8/5jha3MzXzKgvOU9kJXuFkFDaFI0MPqiHACPcBGAYYCw/s100/20191126_143256.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-HY9MUaJnSeA/XohaK16Mk9I/AAAAAAAAvF8/OQMKMIPgKt0XdC2WipKJ_gnCF8s9YYFCwCPcBGAYYCw/s100/IMG_20191205_095751_455.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://3.bp.blogspot.com/-eUKnaiE6ZR4/XohaKzr21CI/AAAAAAAAvF8/mnJo7OoujuID6MoT9Ima4COSGrJGLmSNACPcBGAYYCw/s100/IMG-20191202-WA0000.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://1.bp.blogspot.com/-yXNH6DCVC24/XohaK9r2aSI/AAAAAAAAvF8/U8N9o6GxsFEMfKfYHoOZTLpa6W3g4VO-wCPcBGAYYCw/s100/20191130_202345.jpg" ><img class="PT-img" onclick="FTfu(this)" src="https://2.bp.blogspot.com/-XK7tF8OONjc/XohaK5f7DDI/AAAAAAAAvF8/Wl9O6GlTLc8QXuaM7xL_lp-uNymCN9PlgCPcBGAYYCw/s100/IMG_20191118_141524_945.jpg" ></div> <div id="DP"></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; } function FTfu(xx) { var Mid = xx.parentElement ; var PTL = Mid.getElementsByClassName("PT-img") ; var BTA = Mid.getElementsByClassName("BT") ; 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 ; var elem = PTL[0]; if (elem.requestFullscreen) {elem.requestFullscreen(); } else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();} else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen(); } else { } //DP.innerHTML = Mid.id + " [" + PTL.length + "] " + MsrcU ; } //* +++++++++ out Fullscreen ++++++++++++++++++++++++++++++++++++++++++ *// function FTout(xx) { if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} } //* +++++++++++++++++++++++++++++++++++++++++++++++++++ *// 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>

00

<style>#Full {display: flex;justify-content: center;align-items: center;height:200px; background-color: cornsilk;} //#Full img {width: 200px;} #Full img{max-width:300px;cursor:zoom-in; margin:10px 10px } #Full img:-webkit-full-screen {max-width:100%;cursor:zoom-out;} #Full img:-moz-full-screen {max-width:100%;cursor:zoom-out;} #Full img:-ms-fullscreen {max-width:100%;cursor:zoom-out;} #Full img:fullscreen {max-width:100%;cursor:zoom-out;} </style> <br /> <div id="Full"><img onclick="FullA(this)" src="https://1.bp.blogspot.com/-N_le5RKupj4/XohaKx-9R9I/AAAAAAAAvF8/5jha3MzXzKgvOU9kJXuFkFDaFI0MPqiHACPcBGAYYCw/s1600/20191126_143256.jpg" width="100px"/> <img onclick="FullA(this)" src="https://charts.aastocks.com/servlet/Charts?fontsize=12&15MinDelay=T&lang=1&titlestyle=1&vol=1&Indicator=1&indpara1=10&indpara2=20&indpara3=50&indpara4=100&indpara5=150&subChart1=3&ref1para1=12&ref1para2=26&ref1para3=9&scheme=1&com=100&chartwidth=673&chartheight=480&stockid=110000.HK&period=9&type=1&logoStyle=1&g" width="200px" /> <img onclick="FullA(this)" src="https://charts.aastocks.com/servlet/Charts?fontsize=12&15MinDelay=T&lang=1&titlestyle=1&vol=1&Indicator=1&indpara1=10&indpara2=20&indpara3=50&indpara4=100&indpara5=150&subChart1=3&ref1para1=12&ref1para2=26&ref1para3=9&scheme=1&com=100&chartwidth=673&chartheight=480&stockid=111000.HK&period=6&type=1&logoStyle=1&" width="200px" /></div> <script>function FullA(xx){ var elem = xx; if(document.fullscreenElement || window.fullScreen || (window.innerWidth == screen.width && window.innerHeight == screen.height)){ if (document.exitFullscreen) {document.exitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} } else { if (elem.requestFullscreen) {elem.requestFullscreen(); } else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();} else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();} else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen(); } } } </script>

00

#requestFullscreen() 全螢幕#exitFullscreen() 全螢幕#css fullscreen