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 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
javascript调试说明
Jun 07 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
javascript 用函数实现继承详解
May 28 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
javascript用rem来做响应式开发
Jan 13 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显示MySQL数据的三种方法
2008/06/05 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
python切换hosts文件代码示例
2013/12/31 Python
Python实现单词拼写检查
2015/04/25 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python numpy 反转 reverse示例
2019/12/04 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Python API len函数操作过程解析
2020/03/05 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
后勤部长岗位职责
2013/12/14 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
生产厂长岗位职责
2014/02/21 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
外联部演讲稿
2014/05/24 职场文书
现场活动策划方案
2014/08/22 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
幼儿教师个人总结
2015/02/05 职场文书
校友回访母校寄语
2015/02/26 职场文书
公司停电通知
2015/04/15 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
js前端图片加载异常兜底方案
2022/06/21 Javascript
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS