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重建星际争霸
Dec 22 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
js原型链原理看图说明
Jul 07 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
如何通过JS实现日历简单算法
Oct 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
dedecms系统常用术语汇总
2007/04/03 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
关于图片验证码设计的思考
2007/01/29 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python如何定义有可选参数的元类
2020/07/31 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
社区文化建设方案
2014/05/02 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书