HTML5代码实例:HTML5全屏API

最新推荐文章于 2024-09-22 11:17:00 发布

iteye_14971

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量127

点赞数

文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/iteye_14971/article/details/82581201

版权

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>html5 -fullscreen-api</title>

<style>

*{ margin:0; padding:0}

....................................................................

.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>

(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>

window.οnlοad=function(){

if (window.fullScreenApi.supportsFullScreen) {
var imgContainer=document.getElementsByTagName('div');

var imgsLen=imgContainer.length;