一. 首先,定义插件名称,按照JQuery插件命名规范,命名为 jquery.fullscreen.js 代码如下:
创新互联主营如东网站建设的网络公司,主营网站建设方案,app软件定制开发,如东h5微信平台小程序开发搭建,如东网站营销推广欢迎如东等地区企业咨询
/**
* 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;
}三. 应用全屏插件:
