上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 相关教程 >>  网页教程 >>  HTML教程

HTML5代码实例 让你速度掌握HTML5全屏API

HTML5全屏API ,全屏浏览图片。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html5 -fullscreen-api</title>
<style>
*{ margin:0; padding:0}
img{ display:block; margin:0 auto}
.imgContainer:-webkit-full-screen {
width:100%; height:100%; background:#060; overflow:hidden; background:#000; text-align:center;
position:fixed;
left:0; top:0;
display:table-cell;
bottom:0; right:0;
} 
.imgContainer:-moz-full-screen  {
width:100%; height:100%; background:#060;overflow:hidden; background:#000; text-align:center;
position:fixed;
left:0; top:0;
bottom:0; right:0;
display:table-cell;
vertical-align:middle
} 
.imgContainer:-webkit-full-screen  img{ max-width:100%;  display:inline-block; vertical-align:middle ;cursor:url("http://a.xnimg.cn/n/apps/photo/modules/photo-view/cssimg/zoomOut.cur"), auto;
}
.imgContainer:-moz-full-screen  img{ max-width:100%; display:inline-block; vertical-align:middle;cursor:url("http://a.xnimg.cn/n/apps/photo/modules/photo-view/cssimg/zoomOut.cur"), auto;
  } 
</style>
<script type="text/javascript">
(function(){
           var fullScreenApi={
             supportsFullScren:false,
                 isFullScreen: function() { return false; },
                 requestFullScreen: function() {},
                 cancelFullScreen: function() {},
                 prefix:''
                 
           }
  
   browserPrefixes = 'webkit moz o ms khtml'.split(' ');
  
   if(typeof document.cancelFullScreen!='undefined'){
           fullScreenApi.supportsFullScren=true
  
           }
           else{
                   for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
  
                        fullScreenApi.prefix = browserPrefixes[i];
  
                        if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
  
                                fullScreenApi.supportsFullScreen = true;
  
                                break;
  
                        }
  
                   }
  
                   }
  
                   
                //如果浏览支持全屏  
  
      if(fullScreenApi.supportsFullScreen){
  
                fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; 
  
                  fullScreenApi.isFullScreen=function(){
  
                          
  
                          switch (this.prefix){
  
                                  
                                  case '':
  
                                  return document.fullScreen
  
                                  case 'webkit':
  
                                  return document.webkitIsFullScreen
  
                                  default:
                                  return document[this.prefix+'FullScreen']
  
       
                                  }
  
                          }
  
                  fullScreenApi.requestFullScreen=function(el){
                        return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();                         
         
                          }
                   fullScreenApi.cancelFullScreen=function(el){
                        return (this.prefix === '') ? el.cancelFullScreen() : el[this.prefix + 'CancelFullScreen']();                         
             
  
                          }
                  }
        window.fullScreenApi = fullScreenApi;       
        })()
</script>
</head>
<body>
<h1 align="center"></h1>
<div class="imgContainer">
<a href="javascript:void(0)"><img src="uploadfiles/image/201312/1f758e7dfa720a785d580bf4cd865d32.jpg"></a></div>
<div class="imgContainer">
<a href="javascript:void(0)"><img src="uploadfiles/image/201312/9ba3983a546542f0015e313446d7ad2b.jpg"></a></div>
<script type="text/javascript">
window.onload=function(){
        if (window.fullScreenApi.supportsFullScreen) {               
        var imgContainer=document.getElementsByTagName('div');
        var imgsLen=imgContainer.length;
        for(var i=0; i<imgsLen;i++){
                imgContainer[i].addEventListener('click',function(){
  
                                if (!fullScreenApi.isFullScreen()) {
            this.style.lineHeight=window.screen.height+'px';
                        window.fullScreenApi.requestFullScreen(this)               
                        }
                         else {
                        window.fullScreenApi.cancelFullScreen(document)               
                }                       
                },true)
        }
        }     
}
  
</script>
  
</body>
</html>


用chrome或者firefox直接运行即可。。。

做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • HTML入门学习教程:简单网页制作
    TOP