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


  2. function fullScreen(el) {
  3.     var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
  4.         wscript;
  6.     if(typeof rfs != "undefined" && rfs) {
  7.         rfs.call(el);
  8.         return;
  9.     }
  11.     if(typeof window.ActiveXObject != "undefined") {
  12.         wscript = new ActiveXObject("WScript.Shell");
  13.         if(wscript) {
  14.             wscript.SendKeys("{F11}");
  15.         }
  16.     }
  17. }
  19. function exitFullScreen(el) {
  20.     var el= document,
  21.         cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
  22.         wscript;
  24.     if (typeof cfs != "undefined" && cfs) {
  25.       cfs.call(el);
  26.       return;
  27.     }
  29.     if (typeof window.ActiveXObject != "undefined") {
  30.         wscript = new ActiveXObject("WScript.Shell");
  31.         if (wscript != null) {
  32.             wscript.SendKeys("{F11}");
  33.         }
  34.   }
  35. }

HTML代码
最近受了一点点小刺激，对自己做的工作产生迷茫，不知道还要做这个做多久，还有我其实还是喜欢设计多一些，还有我喜欢设计，但是设计太难了，经常觉得自己做的东西跟别人的，比起来差个好几万块钱，Why?你问我，我问谁。好吧，我也很无赖。
举个小小例子，随便来一个按钮试试，按钮上在来个点击事件切换。


  2. <html id="Content">
  3.     <body>
  4.         <ul>
  5.             <li>
  6.                 <a id="BtnFullOpen" href="javascript:void(0);" title="按“F11”进入全屏模式">
  7.                     <i class="ace-icon fa fa-arrows-alt"></i>全屏查看
  8.                 </a>
  9.                 <a id="BtnFullQuite" href="javascript:void(0);" title="按“F11”关闭全屏模式" style="display:none;">
  10.                     <i class="ace-icon fa fa-arrows-alt"></i>全屏关闭
  11.                 </a>
  12.             </li>
  13.             <li>2</li>
  14.             <li>3</li>
  15.             <li>5</li>
  16.         </ul>
  17.     </body>
  18. </html>

记得一定要加上调用代码，调用代码，调用代码，说三遍...
JS调用代码


  2. var oBtnFullOpen = document.getElementById('BtnFullOpen');
  3. var oContent = document.getElementById('Content');
  4. oBtnFullOpen.onclick = function() {
  5.     fullScreen(oContent);
  6.     oBtnFullQuite.setAttribute("style", "display:block");
  7.     oBtnFullOpen.setAttribute("style", "display:none");
  8. }
  9. var oBtnFullQuite = document.getElementById('BtnFullQuite');
  10. oBtnFullQuite.onclick = function() {
  11.     exitFullScreen(oContent);
  12.     oBtnFullQuite.setAttribute("style", "display:none");
  13.     oBtnFullOpen.setAttribute("style", "display:block");
  14. };

只做个人备忘，不做任何发表，不做信息交流。
尽管拿去用，不谢！

原文地址：https://segmentfault.com/a/1190000015709926

JS 实现全屏预览 F11功能的更多相关文章

  1. IOS 图片全屏预览

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. bzoj 2618【半平面交模板】

    #include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...

  2. vim下撤销操作.选中复制等操作

    vim撤销操作:u vim恢复操作:ctrl+r 使用normal模式下的  v命令,进入visual模式,v+ j/k/h/l   进行文本选中 对于选中的文本进行如下按键: (1.1)d   -- ...

  3. EL表达式（详解）

    EL表达式 1.EL基本内容 1)语法结构        ${expression} 2)[]与.运算符      EL 提供.和[]两种运算符来存取数据.      当要存取的属性名称中包含一些特殊 ...

  4. Poj 2594 Treasure Exploration (最小边覆盖+传递闭包)

    题目链接: Poj 2594 Treasure Exploration 题目描述: 在外星上有n个点需要机器人去探险,有m条单向路径.问至少需要几个机器人才能遍历完所有的点,一个点可以被多个机器人经过 ...

  5. _bzoj1031 [JSOI2007]字符加密Cipher【后缀数组】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1031 保存后缀数组模版. 其实如果数据范围小一点,或者空间限制再大一点,或者甚至只要字母表再 ...

  6. 学会用LATEX写论文

    记录下,方便找寻 https://www.bilibili.com/video/av18365099/

  7. Windows查杀端口

    Windows环境下当某个端口被占用时,通过netstat命令进行查询pid,然后通过taskkill命令杀进程. 一.查询占用端口号的进程信息 netstat -an|findstr 二.杀掉占用端 ...

  8. hbase源码分析：ERROR: Table already exists问题诊断

    问题描述: 重新安装了测试环境的hadoop,所以之前hbase所建的表数据都丢失了,但是zookeeper没有动.在hbase shell中list的时候,看不到之前建的表,但是create tes ...

  9. 快速体验openstack-用devstack安装openstack

    官网安装说明: --2014年11月15日14:14:21 安装环境:Ubuntu12.04,安装官网的说明遇到了小问题,记录在这里 --http://docs.openstack.org/devel ...

  10. http升级https改造方案

    一.解决方案 1.httpClient请求https版蓝鲸接口 (1).原理 https与http最大的区别在于SSL加密传输协议的使用.在自己写的JAVA HttpClient程序,想手动验证证书, ...