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 相关文章推荐
用JS控制回车事件的代码
Feb 20 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
Vue infinite update loop的问题解决
Apr 23 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递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php实现cookie加密的方法
2015/03/10 PHP
php中文验证码实现方法
2015/06/18 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
DOM 基本方法
2009/07/18 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
讲解Python中的递归函数
2015/04/27 Python
Python 的内置字符串方法小结
2016/03/15 Python
机器学习python实战之决策树
2017/11/01 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
详解Python with/as使用说明
2018/12/13 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python怎么对数字进行过滤
2020/07/05 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
鸿星尔克广告词
2014/03/21 职场文书
教师节活动主持词
2014/04/02 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
行为习惯主题班会
2015/08/14 职场文书
推普标语口号大全
2015/12/26 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript