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一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
sphinx增量索引的一个问题
2011/06/14 PHP
PHP 面向对象详解
2012/09/13 PHP
php计算title标题相似比的方法
2015/07/29 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python实现栈的方法
2015/05/26 Python
Python的Django框架安装全攻略
2015/07/15 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
文明家庭事迹材料
2014/12/20 职场文书
邀请函怎么写
2015/01/30 职场文书
社团个人总结范文
2015/03/05 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
选购到合适的激光打印机
2022/04/21 数码科技