JS实现全屏预览F11功能的示例代码


Posted in Javascript onJuly 23, 2018

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

少废话,直接上代码,

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}");
    }
 }
}

HTML代码

最近受了一点点小刺激,对自己做的工作产生迷茫,不知道还要做这个做多久,还有我其实还是喜欢设计多一些,还有我喜欢设计,但是设计太难了,经常觉得自己做的东西跟别人的,比起来差个好几万块钱,Why?你问我,我问谁。好吧,我也很无赖。

举个小小例子,随便来一个按钮试试,按钮上在来个点击事件切换。

<html id="Content">
  <body>
    <ul>
      <li>
        <a id="BtnFullOpen" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" title="按“F11”进入全屏模式">
          <i class="ace-icon fa fa-arrows-alt"></i>全屏查看
        </a>
        <a id="BtnFullQuite" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" title="按“F11”关闭全屏模式" style="display:none;">
          <i class="ace-icon fa fa-arrows-alt"></i>全屏关闭
        </a>
      </li>
      <li>2</li>
      <li>3</li>
      <li>5</li>
    </ul>
  </body>
</html>

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

JS调用代码

var oBtnFullOpen = document.getElementById('BtnFullOpen');
var oContent = document.getElementById('Content');
oBtnFullOpen.onclick = function() {
  fullScreen(oContent);
  oBtnFullQuite.setAttribute("style", "display:block");
  oBtnFullOpen.setAttribute("style", "display:none");
}
var oBtnFullQuite = document.getElementById('BtnFullQuite');
oBtnFullQuite.onclick = function() {
  exitFullScreen(oContent);
  oBtnFullQuite.setAttribute("style", "display:none");
  oBtnFullOpen.setAttribute("style", "display:block");
};

只做个人备忘,不做任何发表,不做信息交流。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 #Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 #Javascript
JS实现简单的星期格式转换功能示例
Jul 23 #Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 #Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 #Javascript
jquery实现搜索框功能实例详解
Jul 23 #jQuery
You might like
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
mysql总结之explain
2012/02/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python里运用私有属性和方法总结
2019/07/08 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
生产总经理岗位职责
2013/12/19 职场文书
《雾凇》教学反思
2014/02/17 职场文书
离职保密承诺书
2014/05/28 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
python3中apply函数和lambda函数的使用详解
2022/02/28 Python