✍ 📁 🙈 🙉 🙊
HTML
window Resize
html 測試 左入右出
html 測試 上入下出
html 測試 單入單出
html 測試 左單右單
顯示具有
script 螢幕全屏 Fullscreen exitFullscreen
標籤的文章。
顯示所有文章
顯示具有
script 螢幕全屏 Fullscreen exitFullscreen
標籤的文章。
顯示所有文章
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> <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 " } </script> <style> #mmm{font-size: 20px;color:black} #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;} #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>
預覽
寫程式
還原
LLLLLLLLLLLLLLLLL
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IpFKbErhPeVG1R6S23rHkucs4A5KK_oq_uAcCSAT0_LF-o1r-HcfCOU7uqruFbQ5VsnnIXshygbOJCu1vDcptJIc8vVUtxacrb6hIThyphenhypheng5pdUo6cluBfAcZmsL7iIrmjSxv89KtB2aFH/s100/inCollage_20191124_173415963_mh1574588854008.jpg" > <div style="display:none"> <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyR3s5XJuslpTVnircdLWqBZgKzaGX33weyhFk9OrM-1bZpf7dWcc9sfFFdrfJ2Pux9PfsSImIriAUe-KimRH-Z_3buqf5wSuPnjdp1hoqvz5TQPmZm1mJdBAbnAqP4l_7My0XALIuXKs/s100/20191124_172832.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyM5aC7LtdnUJehYMxcnJ69ONed4TDObU8-IlkZwC5gtMvLLY-YG8umdgJu7c1Uh56n9j7udfrhG7PESyKh5O5lp8WRYT4cNxSW66APe_eYZ-8TvCTIlmMi4TTPiA9Ow8GgxG-NMPRBIxE/s100/20191124_172810.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpH9k5T90EL-zGO5PUE28t8k-drbs68bHtkbLcvPJYgOtFIUGzNBc0IAPjEWLR-S6Oc5vhLkF4DCmLUhBjxgaYOjYYqIB1nK-HXrM7yPTq2FlYDGBVkNeviNhdhB5r-CEZMy71Fm0uAayW/s100/IMG_20191118_142648_957.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqi0MgupuGc08Q9Walg-jT5JoEdG3duL37htx-cv2oBK6Y1a75bwsZWm9Q1NStPC3Zc5zQujQLd26n8ivonukZ629NAiGJMYDTdlLeFNw8ZkA1m5uylnD29-_9wSYEI8GtVD8zWUeJ3Q/s100/20191124_172821.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KWdwL3KCzA0zEfDoDJvz5U9N-WEOvCNYzeGANCTqfnMX5mgscKJodqTNyIhlJ1T2ohneRM0bcqPxZQUxxFERdr9gIqE0MsWuQ6ab5iNFrbHu743eqGfAkyHnFLGZiVGDNKLj_BxF5VfC/s100/20191126_143256.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS5PvAX8SwBz_wFBioR2nHw6bSB2JijXZ94ShpVLzqcIzqeXrpYB0waZ0aNnOiR_k6rPEeRnWz_yBgzvCw7fCbhF4Pjd48C2XKhYK875B4-5lT5F-25ZMKc-f7EVbHQ7PFOs1eYxubEP_a/s100/IMG_20191205_095751_455.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYognrdKofmOEVAWpbvOJhq8k971eKmEKoTwYFdEm7z7k5jOztxIaQvDebkkKlspeiPyBHjiv4xEglcnlDk93cF2VTZnnwj9a5NKYBjO0vMCgI2fgJK4thBIq0D20IYIQ5wQFTxrxRdCrn/s100/IMG-20191202-WA0000.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFgcEidUbR3-XhVC_DTOK5xLFg9QQyfhVKcqs8RTTw3HIwlTbTprjFLFqS0Rlo_9fYhGxDthT0ffIM9PQ6hgsbC9xy4TWdZA0pXpXN2GhKiMSpTwTLsgtXK3RN3ohRedwWvcOLo4ZFy0-/s100/20191130_202345.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7zJ53E3O7Ob9cB_eKQAkTM0CngVIeIB_O5d05RdBC7eDfiJBP_Kiwrhl00TUM2fWsTpynnn_Lhl5HAxzqktFtuklq1RdIxXS9kJKRi7_jRAEZYm7irbZzITR4h7Yxe8yXaRAZBK9_iCZ6/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>
預覽
寫程式
還原
LLLLLLLLLLLLLLLLL
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia6tIVzdJh5Rw5VxXtJIY_HQOJScXgD2RIq9AANid9bWyXyKYS0qjOM-lQFkEWCLQScW20y5CzWSvE3tUiNpsdurDHWT-puwdmRza1VW28JcjKJ9wJnJfcaZcCUilALCITgEFKWXk3bCVH/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0003.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwoZni2ppvX4arb-AQBJLCYy0B3UuAHkdgVOHqyp8v6YYuNGlp2tAyHw6k5d03dJKAx5o5IwKiiDJcaiLwbNXUgk4-UfxKPP6iqaOmTmh3zOYMECMKuKXNfhMyi5v3mIC9j_zm8Az1WJc/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0024.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJOXcQAtKjO-D9gG91h50l0EhNOLCwPFRjZmLo1_RCkrL0kwSUlZM1pOiQCBRRyOdwYykLYFr3QbKfWBqvNvEt13Vr4rGxb6Y255DuNvYMIPNkfZ7m4vb7wFROLlGHb7ygVhPwdtLbFLa/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0006.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulU-8NyxragDY3dUUnzzxxJaYb_088VykzczfBpcOehWMzzJIIcyHYfVGVk83Z4c38D6FfXUXw8i_pGJ19n2bZ-Hlk8twSU6QKXynGwRWfo2XfbUC_ETES8ql46IXWkhBCcAcOv12-6Qb/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0007.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aPKMBcCH6lO3qUUl_vmdmBkfqaGlOcR_BHZBYjvwsMTrhQ2hYWXB2HPH5jm-FgxFU6M38UnsuVt8nJzMRlQPKhoCqvvTqXRvz1_Aa3xzAcxzJk7rK3IKXP-W1dCOOoDRGec2TpFIm3li/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0008.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOSsPD4mWLiJQ2YlD0aKLZJM_C-CCUnY1p6u8_BPIrOcUE1yElojedO135YZBFFgeluE6uFIKTg3uHxcwpuuI_gGE19n0pEbShW-zzz9F6_bq04CPFg-qhI_aO9yhlZnz8tkzwwt1KK_0/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0004.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6jaFnTAfb-NcHoWdWZsJJnT4VgQeB17fgQbYKvuacXw9bswHlZxRWIwRvro3mAcYvgRP3an_GC1sAItiXr2mFJJ6XHUK5v7zYX3nqAtVGams03O6WKC_RrSEg74SHThttuMTvwncW0hXI/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0005.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4qABLe0cHaAGhfhdeVqiHYMjoO2Clrq0ZyxKYftD72AiFK8lGskzLPETd_r_9xwd3DahRgzafb3A81_vXIl2ROfWgCusIi8E1a23mz-t5qYFqdyDMDOmiVl64QCFIw7lpwJoQwx5dJwS5/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0009.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlpsgtjH9OMZ0vt7A8q9rASyPdG99ZOrXt4SDax5F9E_I6QrHSJI0Wp3zIvrxW_s4AY7LwUVZCfoO-GXV-D7_YDNAfLd_ILsu-c0MO7WIDvet3HVjdO6fmjV4caQ71_e0jLgKABDvTad8/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0010.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4T9sgIpeTF9FCG3JyvYk0qNCMvuomTUZHOiQRcltXyRFeYDQP1yYrZRkWs6f0dCmrHuJK6raaDwH0MNsw0uoG7oBe0VCZkuhVTVA-veyl0f6wkPppyP0xHh1P3HuZG-l8qcKFzxPYTSUU/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0015.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFwpjle_4eGftIdAtfdXTBuj6qlliq4HUh4MRCZWaGxclRw6Bi4DR6g7GM1cBwxoN1xWLaFqkZPxyfaWXwATf5BtnJVLy7AYxHuMyGyOlxQo2dptXgf2GgiAw7XyRthBswZCsV90p8P_v/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0011.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5x-Dv5d4Oy8obveugSrRcF4MTenMjulG6Xkh8sQuB9tdhAj04uE_E2KO__wdV_3vRYu5A7c2vBQ7cj7e_TNX9SJIM1anGglOMnY7scAPE8SRd9ulKmbsBH3PP2JiLhKHyKgjhTr0xY8M9/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0013.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArHK7zlj0k1kZrFOTCEq2sCbLlYZ-8G_9DMFE__dwqZexNJ7A-X6UDayCUQn8UE5ZKZfpYpipL1wG6mZXggcfziF_MtfxQnYnkbxrwgCIbX2TL1TKKoyzYBBMQvRz0Zd638GZa9hLkn8d/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0012.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHrHle76-7_hahz6mElEMA-XGEChDatbeF-gmNPoQkUA6p6Ou7Vr3CLpBfwPGxhvZeR1pqv5ZeLWPkJAFpDY5VlrERdh1eKI2tNJagMPrFZOMix0jgIDYl5DsHqhAXhJ0reBOc_NlgGYLr/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0016.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNJOPAVCv_FaylAzKjHI2n2HfHorCmg6ci9KgtpXe9ecE4SQTpSHtHq_uO0e6M-Bu7b_Q-8wy41o3VvJZCWnsm5u-SvmLNMPKaYTbv2CVmROPAXwHsIaR4SOLFACpNk-63EM89F60NOBp/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0017.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMA77xywQvuloHRGUXr9CqkL7vPdLt9Gp0zB1C5fiHVo5DuW6iAO9pRwx1ElCo3adWWyJnqvQz7oqanffAUWljVMdPVnBQlepBUmgKc99cyv5_thAczXyRU01BRaghQrk_ukd85uAAaWwz/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0018.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGfn5_Bwoi60n3eSfif8PFbecqXFkpRIZxVtDciDo6Hm19qvT6cSQLQW88HaGNe0gasx5NpW0M9v3kYtOipKiOr7HJrqTMRipCFfESmaKU-fS3Olmz3nwOn7L2G8h6yKKw7zszOGAl_Lpm/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0019.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3XSbbRWdYesV_xBAugxOGJxXvsT-qop1uOelS7GJ2J9cCitlQbYOQvFuQt-2Uhv_ImXjztc7MfkA3oebuZO1wjb6dY00cJJ3JveAl-J30o6lCbeQ07DjhIQ2DldOjr7f_ZIiPXOVz1wWT/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0020.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg50ks60h31MsA_KRurwtzlb_7kF4bEjixprfJHYv9zCn6p09u5vQmJe_-ZpUvqKo6Ihou7qsygPp_UdtBN4eq3YhLTxQyzenQtumjCG9iTYDqEeNTq-EzW3syuuObKA95bjGZZIy-N0Bg/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0021.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzg85PnVW6CWWFuPgug8MYVmmSlU_lrSclXbjgclBKEXo9MHz5oEwIV0Sx-quip7sGpBJNrGraVHRxjtM0YGHQ5t0uBlQawQ5UaYescMtVNrk1xNzYBNz_W0Tv4zH8JViBtO482uTSvy_/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0014.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffNFYGA8L7JlKADHBM9lrkWSITEOeoZTYQyEtmUOJQ42Xg04ByaTg8uewzmata2JVPcS3JxH-32pGoioikWlpYSmS00hETZQ51-2z4DeN09RxrsOJXeSkzgXjwUM5Ctud0sKbeEIYVQC6/s100/%25E6%25B7%2598%25E5%25AF%25B620141224_0022.jpg" > <img class="PT-img" onclick="FTfu(this)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7GEc8ZbAMQxkE-Swdhc3IUAc6WjFISZS2ScNZKLILN1Cx85QlZ_x7GVzU_NZ9S4UQOSaOgkl-vDrJ8n7KCIc0Nk2Etk3QfvieZf1WrXvNeKVxtqt73JP_bCf_hBWiGxZ7crN3_Qc0GLeA/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>
預覽
寫程式
還原
LLLLLLLLLLLLLLLLL
<style> #Full {display: flex; justify-content: center; align-items: center; height: 300px; background-color: cornsilk;} #Full img {width: 300px;} #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> <div id="Full"> <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"> <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&"> </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>
預覽
寫程式
還原
LLLLLLLLLLLLLLLLL
Edit
#html
#網頁格式
#style
#div
#requestFullscreen() 全螢幕
#exitFullscreen() 全螢幕
#css fullscreen
較舊的文章
首頁
訂閱:
文章 (Atom)