参考文档   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}");

        }

    }

}

js 实现全屏预览（F11功能）--转的更多相关文章

  1. JS 实现全屏预览 F11功能

    老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我?少废话,直接上代 ...

  2. IOS 图片全屏预览

    如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片 ...

  3. IOS中实现图片点击全屏预览

    //// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...

  4. 图片无损放大软件PhotoZoom分屏预览功能 ，简直好用！

    PhotoZoom是一款智能放大图片软件,很多用户在初次使用PhotoZoom,发现图片所处的区域上方有四个不同方式的预览选项.因为很多初学者使用时不明白这四个按钮有什么作用,所以小编接下来讲解一下P ...

  5. JS实现上传图片的三种方法并实现预览图片功能

    地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...

  6. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  7. input file样式修改，图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  8. Android 10开发者预览版功能介绍

    Android P的开发者预览版最亮眼的功能莫过于支持“刘海屏”等屏幕显示.同样在适配可折叠设备方面,Android Q的第一个开发者预览版也很“接地气”,谷歌早在去年11月就发布了对可折叠设备的支持 ...

  9. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  10. 本地存储数据库indexedDB实现离线预览的功能

    今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...

随机推荐

  1. 将本地文件推送到Gitee仓库

    完整的步骤 1.在gitee中创建仓库 2.下载.安装git 3.推送文件到gitee 推送文件到gitee 1.在要上传的文件夹空白处,点击右键,选择 git bash here 2.输入 git ...

  2. Oracle函数NULLIF

    1.NULLIF函数 函数语法:NULLIF(Expression1,Expression2) 函数功能:如果来个表达式相等,则返回NULL值,否则返回第一个表达式 功能很简单,但是要注意以下几种情况 ...

  3. win10 右键文件夹卡死

    遇到右键文件夹卡死的问题,网上查找尝试, 命令窗口输入如下命令: SFC/Scannow 还有个思路 ,360安全 软件大全下载一个右键管理软件删除多余无用的右键选项: 参考:https://answ ...

  4. PyTables 教程（二）多维表单元格和自动健全性检查，使用链接更方便地访问节点

    翻译自http://www.pytables.org/usersguide/tutorials.html 多维表单元格和自动健全性检查 现在是一个更真实的例子(即代码中有错误)的时候了.我们将创建两个 ...

  5. Flink Application Development DataStream API Execution Mode (Batch/Streaming)- Flink应用程序开发DataStream API执行模式（批/流）

    目录 什么时候可以/应该使用BATCH执行模式? 配置BATCH执行模式 执行行为 任务调度和网络随机shuffle 流执行模式 批处理执行模式 状态后端/状态 处理顺序 Event Time/水印( ...

  6. Python学习：Mysql（三）索引

    1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2.索引种类 普通索引:仅加速查询 唯一索引:加速查询 + 列值唯一(可以有 ...

  7. 初玩mybatis-Plus踩过的小坑（粗心大意）

    一开始没设置全局id为数据库自增长(数据库也要勾上自增长) 他是默认使用ID_WORKER生成id的 ,然后当我重新设置为自增长后 发现生成的id还是20位数,局部id也设置了 还是没用 ,百度说哪个 ...

  8. 删除File Explorer、This PC、Folders

    win+R,输入regedit,打开Registry Editor 定位:Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentV ...

  9. Codeforces Round #694 (Div. 1) - B. Strange Definition

    数论 Problem - B - Codeforces 题意 给定 \(n\;(1<=n<=3*10^5)\) 个数 \(a[i]\), \(1<=a[i]<=10^6\) 把 ...

  10. el-form不进行校验可能的原因

    可能原因 el-form至少需要:model="你的数据form",:rules='你的校验规则' 的属性: 只能校验el-input,不能对原始input进行校验 (大坑).