制作一个超简单的全屏插件(基于JQuery)
发表于：2024-11-26 作者：热门IT资讯网编辑
编辑最后更新 2024年11月26日，一. 首先,定义插件名称,按照JQuery插件命名规范,命名为 jquery.fullscreen.js 代码如下:/** * Created by Ivan on 2015/1/28. * jque
一. 首先,定义插件名称,按照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; }三. 应用全屏插件:
Hello FullScreen! Click me!(first Div)Hello FullScreen! Click me!(second Div)Hello FullScreen! Click me!(third Div)