html5自动全屏代码,HTML5代码实例:HTML5全屏API

破洛洛文章简介：HTML5全屏API ，全屏浏览图片。

html5 -fullscreen-api

*{ 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;

}

(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.οnlοad=function(){

if (window.fullScreenApi.supportsFullScreen) {

var imgContainer=document.getElementsByTagName('div');

var imgsLen=imgContainer.length;

        for(var i=0; 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)

}

}

}

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