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 post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
js制作支付倒计时页面
Oct 21 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
JS图片懒加载的优点及实现原理
Jan 10 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python命令行参数用法实例分析
2019/06/25 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
深入浅析Python代码规范性检测
2020/07/31 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
公司感谢信范文
2015/01/22 职场文书
文员岗位职责
2015/02/04 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
商业计划书之服装
2019/09/09 职场文书