html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年5月10日 星期四

fullScreen 全螢幕顯示的

fullScreen 全螢幕顯示的


<div id="imgFull">
<img alt="" src="https://3.bp.blogspot.com/-NOv_hpzehlU/WpTvDadQpjI/AAAAAAAAPEM/bLNfzwwSX-g94HWq89ZR5QUI2YT_ejMsgCLcBGAs/s1600/IMG-20170401-WA0007.jpg" >

<img alt="" src="http://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 alt="" src="http://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>

<style type="text/css">
#imgFull img{max-width:300px;cursor:zoom-in;float:left; }
#imgFull img:-webkit-full-screen {max-width:100%;cursor:zoom-out;float:none}
#imgFull img:-moz-full-screen    {max-width:100%;cursor:zoom-out;float:none}
#imgFull img:-ms-fullscreen      {max-width:100%;cursor:zoom-out;float:none}
#imgFull img:fullscreen          {max-width:100%;cursor:zoom-out;float:none}
</style>


<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<script>

$('#imgFull img').on('click', function(e) {
  if((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{
      var elem = this;
           if (elem.requestFullscreen)   {elem.requestFullscreen(); }
      else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}
      else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();}
      else if (elem.webkitRequestFullscreen) {elem.webkitRequestFullscreen(); }
      else {  alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
      }
}
})
</script>

沒有留言:

張貼留言