• 一个支持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/

    新博客地址
    hooray.github.io
  • 相关阅读:
    temp etc/hosts
    chrome 32位安装好没法访问解决命令 64位也会有这样的问题
    函数与存储过程的区别
    VS创建新的本地数据库
    主从同步
    自定义函数Function
    特殊存储过程——触发器Trigger
    存储过程Procedure
    工具:sql server profiler(分析器)
    数据表访问
  • 原文地址:https://www.cnblogs.com/hooray/p/2446593.html
Copyright © 2020-2023  润新知