一个支持chrome、firefox的全屏插件
2012-04-14 00:22
543 查看
话不多说,直接上demo,你可以点击下面的图片看效果。
插件代码
调用代码
HTML代码结构
基于fullscreen功能,我们就可以做出很多效果,比如相册:
http://eikes.github.com/jquery.fullscreen.js/
又比如视频中的全屏功能:
http://mediaelementjs.com/
当然也不能不说我的HoorayOS中窗口全屏的使用:
http://www.hoorayos.com/
插件来源地址:http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
插件代码
(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://pic002.cnblogs.com/images/2012/277258/2012041400022949.gif" alt="" /> </a>
基于fullscreen功能,我们就可以做出很多效果,比如相册:
http://eikes.github.com/jquery.fullscreen.js/
又比如视频中的全屏功能:
http://mediaelementjs.com/
当然也不能不说我的HoorayOS中窗口全屏的使用:
http://www.hoorayos.com/
插件来源地址:http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
相关文章推荐
- 一个支持chrome、firefox的全屏插件
- 后台使用Spring MVC 4.15 版本 通过 ajaxFileUpload plugin插件上传文件相应时引起的一个小问题,Chrome、Firefox中出现SyntaxError:unexpected token <
- jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- sublime text 3 + LiveReload插件实现前端代码实时预览(同时支持Chrome和Firefox)
- ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
- jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- 推荐一个免费的Firefox 抓全屏插件
- ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
- 介绍一个支持多个文本编辑器的HTML和CSS代码快捷编写插件
- 找到一个Eclipse下支持快捷键的bookmark插件-Quickmarks
- 分享我的一个Chrome插件
- FireFox一个下载FLV和Flash的插件
- 一个dreamweaver插件,解决不支持部分asp.net 2.0控件问题
- 文本框显示行号功能-支持IE/firefox/chrome等浏览器
- 一个JavaScript WEB日历控件,支持IE6,FireFox,可支持不同语言版本,目前支持中英文。
- 一个不错的Chrome 代理插件
- 分享一个asp.net支持firefox,google,ie的Response下载
- firefox&chrome不错插件
- Linux下启用Chrome/Firefox的Java插件
- IE8.1将支持Firefox插件,Gecko和Webkit引擎