制作一个超简单的全屏插件(基于JQuery)
一. 首先,定义插件名称,按照JQuery插件命名规范,命名为 jquery.fullscreen.js 代码如下:
/** * Created by Ivan on 2015/1/28. * jquery.fullscreen.js */ (function($){ $.fn.toggleFullScreen = function(){ var supportsFullScreen = false; var fullScreenEventName = ""; var browserPrefixes = ["webkit","moz","o","ms","khtml"]; var prefix = ""; var screen = this[0]; if(document.cancelFullScreen){ supportsFullScreen = true; }else{ for(var i = 0;i< browserPrefixes.length;i++){ if(document[browserPrefixes[i] + "CancelFullScreen"]){ prefix = browserPrefixes[i]; supportsFullScreen = true; break; } } } var cancelFullScreen = function(){ // 取消全屏 (prefix === "")? document.cancelFullScreen() : document[prefix + ‘CancelFullScreen‘](); }; var isFullScreen = function(){//当前是否为全屏 switch (prefix){ case "" : return document.fullScreen; break; case "webkit": return document.webkitIsFullScreen;break; default : return document[prefix + "FullScreen"]; } }; var requestFullScreen = 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; }
三. 应用全屏插件:
<div class="test">Hello FullScreen! Click me!(first Div)</div> <div class="test">Hello FullScreen! Click me!(second Div)</div> <div class="test">Hello FullScreen! Click me!(third Div)</div> <script type="text/javascript"> $(".test").click(function(){ $(this).toggleFullScreen(); }); </script>
本文出自 “依云” 博客,请务必保留此出处http://ivanwang.blog.51cto.com/4487593/1613211
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。