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

标签: chrome firefox 插件 | 发表时间:2012-04-13 16:22 | 作者:胡尐睿丶
出处:http://www.cnblogs.com/

话不多说,直接上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/

本文链接

相关 [chrome firefox 插件] 推荐:

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

- - 博客园_首页
话不多说,直接上demo,你可以点击下面的图片看效果. alert('就你这浏览器,基本就告别全屏功能了');. 基于fullscreen功能,我们就可以做出很多效果,比如相册:. 当然也不能不说我的 HoorayOS中窗口全屏的使用:. 插件来源地址: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/.

hello,chrome,我是Firefox。。。

- - 前端观察
今天,Firefox发表了一段视频, 宣告Firefox和Chrome之间的视频通信成功~~. 在Chrome支持WebRTC之后,Firefox终于在Nightly版本中也开始原生支持了. 虽然现在只有PC支持,但是可以遇见不久之后,手机端也会开始支持了,而Firefox引入WebRTC,应该主要还是为了自己的Firefox OS.

Chrome+Firefox 扩展推荐

- - 笨兔兔
Adblock – 阻击网页广告. Google Mail Checker – Gmail 收件箱提示. Turn Off The Lights –观看网页视频时候”关灯”. Google Chrome to Phone –将链接或信息直接发送到Android 手机上. IE Tab –Chrome 下使用IE风格显示网页.

最佳 Firefox SEO 插件:SearchStatus

- 翼翔 - 我爱水煮鱼
Firefox 变得越来越重,但是我一直在使用 Firefox,最大的原因是因为 Firefox 上面的插件,有些神一样的插件,真的可以提高我们的工作效率,今天可以给大家推荐的 SearchStatus,就是 Firefox 上最优秀的 SEO 插件,可以说它是 SEO 神器. 为什么把它说的这么神奇,其实从下图就可以看出:.

Firefox 再次在性能上打败 Chrome

- - 开源中国社区最新新闻
时隔多年,开源浏览器Firefox再次在性能上战胜Chrome. Tomshardware 评测了Chrome 27、Firefox 22、IE10和Opera Next四大浏览器. 评测对比了四大浏览器的启动时间、页面载入时间、JavaScript/DOM性能,HTML5/CSS3性能,硬件加速性能.

在IE、Chrome、FireFox中调试Javascript

- - JavaScript - Web前端 - ITeye博客
在IE中调试JS: http://www.qeefee.com/js/debug-javascript-in-IE. 在Chrome中调试JS: http://www.qeefee.com/js/debug-javascript-in-chrome. 在FireFox中调试JS: http://www.blogjava.net/vincent/archive/2009/04/14/265591.html.

how to write extension for firefox -- 如何给firefox编写插件

- - CSDN博客Web前端推荐文章
1.1 创建一个dev profile. 1.3 创建或者修改一些preference. 1.4 启动firefox. 使用-no-remoet可以使你同时用自己平时使用的profile浏览网页,和你开发的profile互补干扰. Note 1:当你修改install.rdf中有关firefox的compatile version时,有时会提示你版本不兼容当前的firefox,不要理会,.

Firefox建议用户禁用McAfee插件

- L - Solidot
深圳SEO 写道 "Firefox在其官方插件阻止列表里建议用户禁用McAfee ScriptScan插件,原因是该插件会引起“稳定性及安全性”问题,安装过该插件的用户在打开Firefox后会收到相关的禁用提醒. ScriptScan是McAfee开发的一款保护网页浏览安全的插件,但是根据Firefox的用户反馈统计,该插件经常会导致浏览器崩溃无法运行以及其他一些未知问题.

TabCloud – 同步多台电脑的 Chrome/Firefox 标签页 | 小众软件 > Chrome

- wyest - 小众软件
TabCloud 是款浏览器扩展,支持 Chrome/Firefox,可以同步多台电脑的标签页. TabCloud 可以解决多台电脑多组标签页不同步的问题. 安装扩展后,首先需要登陆 Google 账户. 如上图,点击 TabCloud 图标后,会出现当前标签组保存项以及之前保存的标签组. 点击 Click to Name 可以修改标签组名称,之后点击保存按钮即可.