插件代码
(function(){
var fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(this);
}
});
};
}
window.fullScreenApi = fullScreenApi;
})();
调用代码
$(function(){
$('#fullscreenbtn').click(function(){
if(window.fullScreenApi.supportsFullScreen){
window.fullScreenApi.requestFullScreen(document.getElementById('fullscreenbox'));
}else{
alert('就你这浏览器,基本就告别全屏功能了');
}
});
});
HTML代码结构
<a id="fullscreenbtn">
<img id="fullscreenbox" style="display: block; margin-left: auto; margin-right: auto;" src="http://www.2cto.com/uploadfile/2012/0414/20120414112853979.gif" alt="" />
</a>
基于fullscreen功能,我们就可以做出很多效果,比如相册:
http://eikes.github.com/jquery.fullscreen.js/
又比如视频中的全屏功能:
http://mediaelementjs.com/
当然也不能不说我的HoorayOS中窗口全屏的使用:
http://www.hoorayos.com/
分享到:
相关推荐
这是一个ChatGPT的畅聊与增强插件。开源免费。不仅能解决所有报错不再刷新,还有保持活跃、取消审计、克隆对话、净化首页、展示大屏、展示全屏、言无不尽、拦截跟踪、日新月异等多个高级功能。让我们的AI体验无比...
可以实现滚动鼠标滑轮界面全屏滚动的效果,点击页面列表界面也会滚动。测试支持到了IE8,firefox,chrome。
JBrowse 的全屏插件 该插件添加了一个按钮,允许全屏查看 jbrowse。 如果与 iframe 一起使用,您需要配置 iframe 以允许全屏视图。 应该兼容: 浏览器 支持版本 Chrome合金 20+ 火狐 10.0 + IE 11 + 苹果...
网站: : Chrome网上应用店: : Firefox插件: : 图标: : :
Movavi屏幕截图应用程序的主要功能:-适用于Google Chrome和Mozilla Firefox。 -可以打印多种尺寸的Google Chrome浏览器:Chrome浏览器的全屏屏幕截图,屏幕的特定部分或全屏截图,包括所有打开的标签页。 -不需要...
Videogular 主要关注移动端设备和 HTML5 视频特定的功能:可绑定属性:Videogular 的指令是可绑定的 通过插件可扩展:根据 API 可以开发定制插件基于主题:可以自定义主题原生全屏支持: 支持 Chrome, Firefox, ...
jQuery全屏插件描述这个jQuery插件提供了一种易于使用的机制来控制现代浏览器的新全屏模式。 当前,只有较新的基于Webkit的浏览器(如Chrome和Safari),Firefox和IE11 +才提供此新的全屏功能。用法进入全屏模式您...
GitHub Diff Explorer是一个极简主义的浏览器插件,可在GitHub拉取请求中生成一个无缝的文件浏览器。 目前,该插件在Chrome和Firefox中均可用。 非常感谢的徽标和横幅设计!产品特点具有全屏视图和可调整大小的...
一个基于Vue.js的可拖拽可分析树级组件。兼容Chrome,Firefox,IE Edge
本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。希望...
这是一个chrome扩展程序,通过完全可自定义的设置将danmaku(弹幕注释)功能引入twitch.tv。 您可以直接在视频流上观看抽搐聊天,而不必看一眼聊天窗口,即使在全屏模式下也可以。 该扩展支持各种表情符号。 您将...
jQuery zoom是一款能够查看相册大图的jQuery弹出层插件,点击相册的缩略图,就会弹出该相片对应的大图,并且带有个性的加载动画,...兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器。
本文给大家分享的是一款jQuery整屏(全屏)滚动插件网页特效,滚动鼠标滚轮整屏一屏滚动切换代码,可设置文字/图片绝对上下左右居中显示JS代码,时下最流行的jQuery全屏滚动插件!(兼容测试:IE6及以上、Firefox、...
适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
fullscreen.js 是一个用来实现全屏的照片展示的 jQuery 插件,使用全屏 API,支持浏览器包括:Firefox 10 and Chrome 15 (还可能有 Safari 5.1 ). 标签:fullscreen
全屏Javascript | jQuery插件 是一个简单,轻巧且易于使用JavaScript库,用于创建全屏滚动网站。 它使访问者能够以平滑的全屏滚动效果浏览页面。 支持键盘,台式机上的鼠标滚轮以及在触摸设备上向上/向下/向左/向右...
3、兼容桌面浏览器: IE 8+ Opera 12+ Firefox 8+ Safari 6+ Chrome 20+ , 兼容移动浏览器 IOS 6+ Safari Chrome for Android 4+ Chrome for iOS Windows 10 Mobile Edage 4、增加多个便捷功能:后台样式切换、...
switchpagejs显示全屏滚动插件支持firefox/chrome/ie7+等主流浏览器#插件接口说明1.支持传入css3动画函数曲线ease/linear等2.动画时间控制3.自适应窗口大小4.提供导航栏5.提供一个翻页按钮(类似支付宝)#默认选项...
素材简介:这款CSS3特效效果独特,变换方式多样、流畅、绚丽,并结合jQuery插件实现效果。 适用浏览器:FireFox、Chrome、Safari、Opera。
在 IE7+、Chrome、Firefox、Safari、IOS、Android 上测试 Popin 或 Layer... 不一样! Popin 是一个放置在页面中的容器,底部有一个灰色层,通常通过点击事件调用。 图层是一个容器,较少的灰色图层并放置在处理程