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>
<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>
沒有留言:
張貼留言