HTML5 Full-screen Full Screen API

This article is purely a record, thank you very much for the demo of Zhang Xin Asahi great God

Original address: http://www.zhangxinxu.com/study/201210/html5-full-screen-api.html

Code CSS Code:

. Full{Text-align: Center;Cursor: pointer;}. Full img{Vertical-align: Middle;}. Full: hover img{Box-shadow:2Px2Px4PX Rgba (0,0,0,.45);}. Full: After{/* Picture vertically centered Display*/Display: Inline-block;Content:‘‘;Width: 0;Height:100%;Vertical-align: Middle;}:-webkit-full-screen img{Height:60%;}:-moz-full-screen img{Height:60%;}:-ms-full-screen img { height: %; }:-o-full-screen img { height: %; }: Full-screen img { height: %; }< /c0>

HTML code:

<Divclass="full" title="Click Fullscreen browse "><img src="http ://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" /></div>  

JS Code:

(function(){VarRunprefixmethod=function(Element,Method){VarUsableprefixmethod;["WebKit","Moz","Ms","O",""].Foreach(function(Prefix){If(Usableprefixmethod)ReturnIf(Prefix===""){No prefix, method first letter lowercaseMethod=Method.Slice(0,1).toLowerCase()+Method.Slice(1);}VarTypeprefixmethod=typeofElement[Prefix+Method];If(Typeprefixmethod+""!=="Undefined"){If(Typeprefixmethod===The function"){Usableprefixmethod=Element[Prefix+Method]();}Else{Usableprefixmethod=Element[Prefix+Method];}}});ReturnUsableprefixmethod;};If(typeofWindow.ScreenX==="Number"){VarElefull=Document.Queryselector(". Full");Elefull.AddEventListener(The Click",function(){If(Runprefixmethod(Document,"Fullscreen")||Runprefixmethod(Document,"IsFullScreen")){Runprefixmethod(Document,"Cancelfullscreen");This.Title=This.Title.Replace(The exit","");}ElseIf(Runprefixmethod(This,"Requestfullscreen")){This.title = this. Title. replace ( "click  " " click to exit  });  else { Alert ( "Ye, now is the age of the young man, you rest for a while!"  "); }})  (   

HTML5 Full-screen Full Screen API