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

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