随笔 - 89  文章 - 0  评论 - 2  阅读 - 11万 

js 实现全屏预览（F11功能）--转

参考文档   http://t.zoukankan.com/ghfjj-p-6322415.html

HTML代码

复制代码
<body>
    <div id="content">
        <div>内容1</div>
        <div>内容2</div>
        <img id="btn" src="img/icon/btn_fd.png" 
             style="float:left;width:18px;height:18px"
             onclick="big()" />
    </div>
</body>
复制代码

JS事件

<script type="text/javascript">
      var clickBigNumber = 1;//定义放大缩小点击次数
</script>
复制代码
function big() {
    //由于只有一个按钮可操作，所以定义了clickBigNumber,
   //第一次点击，clickBigNumber==1，所以为全屏，再一次点击clickBigNumber==2且%2==0，所以退出全屏
    var content = document.getElementById('content');
    if (clickBigNumber % 2 == 0) {
        //退出全屏
        exitFullScreen(content);
    } else {
        //全屏
        fullScreen(content);
    }
    clickBigNumber++;
}
复制代码

JS实现方法

复制代码
//全屏
function fullScreen(el) {
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
        return;
    }
    if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript) {
            wscript.SendKeys("{F11}");
        }
    }
}
//退出全屏
function exitFullScreen(el) {
    var el = document,
        cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
        wscript;
    if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
        return;
    }
    if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
复制代码

 

posted on   我的梦想是开个小店  阅读(1356)  评论(0)  编辑  收藏  举报
相关博文：
· JS点击图片放大
· table 实现自动滚动
· js 全屏方法
· JS实现浏览器全屏F11
· JS 全屏与退出全屏
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示