一个支持chrome、firefox的全屏插件

简介:

 话不多说,直接上demo,你可以点击下面的图片看效果。

  插件代码

( 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/



    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2012/04/14/2446593.html,如需转载请自行联系原作者


相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
使用vue快速开发一个带弹窗的Chrome插件
使用vue快速开发一个带弹窗的Chrome插件
135 0
使用vue快速开发一个带弹窗的Chrome插件
|
2月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
110 0
|
2月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
188 0
|
18天前
|
Web App开发
推荐一款chrome阅读插件
推荐一款chrome阅读插件
22 2
|
1月前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
51 5
|
10天前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
20 0
|
1月前
|
Web App开发 前端开发 安全
Chrome 插件打包发布
Chrome 插件打包发布
35 0
|
1月前
|
Web App开发 JSON JavaScript
Chrome 插件各模块之间的消息传递
Chrome 插件各模块之间的消息传递 一、消息传递 1. 消息传递分类 Chrome 插件的 Action、Background 和 content_script 三个模块之间的信息传输 插件和插件之间的信息传输 网页向插件进行信息传输 与原生应用进行消息传递
22 0
|
1月前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
35 0
|
2月前
|
Web App开发 前端开发 JavaScript
Chrome 插件如何开发?
Chrome 插件如何开发?