一. 首先,定义插件名称,按照JQuery插件命名规范,命名为jquery.fullscreen.js 代码如下:

/***CreatedbyIvanon2015/1/28.*jquery.fullscreen.js*/(function($){$.fn.toggleFullScreen=function(){varsupportsFullScreen=false;varfullScreenEventName="";varbrowserPrefixes=["webkit","moz","o","ms","khtml"];varprefix="";varscreen=this[0];if(document.cancelFullScreen){supportsFullScreen=true;}else{for(vari=0;i<browserPrefixes.length;i++){if(document[browserPrefixes[i]+"CancelFullScreen"]){prefix=browserPrefixes[i];supportsFullScreen=true;break;}}}varcancelFullScreen=function(){//取消全屏(prefix==="")?document.cancelFullScreen():document[prefix+'CancelFullScreen']();};varisFullScreen=function(){//当前是否为全屏switch(prefix){case"":returndocument.fullScreen;break;case"webkit":returndocument.webkitIsFullScreen;break;default:returndocument[prefix+"FullScreen"];}};varrequestFullScreen=function(){//全屏查看(prefix==="")?screen.requestFullScreen():screen[prefix+'RequestFullScreen']();};if(isFullScreen()){cancelFullScreen();}else{requestFullScreen();}return$(this);}})(jQuery);

二. 通过全屏伪类选择器,定义全屏样式:

.test:-webkit-full-screen{min-width:800px;min-height:600px;vertical-align:middle;text-align:center;line-height:600px;background-color:#7FC9FA;cursor:pointer;color:red;font-size:25px;}.test:-moz-full-screen{min-width:800px;min-height:600px;vertical-align:middle;text-align:center;line-height:600px;background-color:#7FC9FA;cursor:pointer;color:red;font-size:25px;}.test{background-color:#c2ccd1;margin:5px;text-align:center;cursor:pointer;line-height:50px;}

三. 应用全屏插件:

<divclass="test">HelloFullScreen!Clickme!(firstDiv)</div><divclass="test">HelloFullScreen!Clickme!(secondDiv)</div><divclass="test">HelloFullScreen!Clickme!(thirdDiv)</div><scripttype="text/javascript">$(".test").click(function(){$(this).toggleFullScreen();});</script>