Html5 实现类似人人网的全屏浏览模式

图片全名模式关键代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html5 -fullscreen-api</title>
<style type="text/css">
* { 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;
})(window)
 
</script>
</head>
 
<body>
<h1 align="center"></h1>
<div class="imgContainer"> <a href="javascript:void(0)"><img src="http://image.dili360.com/photo/hdtj/2012/1205/62_15141524412_20121205094753.jpg"></a></div>
<div class="imgContainer"> <a href="javascript:void(0)"><img src="http://image.dili360.com/photo/hdtj/2012/1205/62_15141524424_20121205094753.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>


你可能感兴趣的:(Html5 实现类似人人网的全屏浏览模式)