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 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
zend framework多模块多布局配置
2011/02/26 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
Python全局变量用法实例分析
2016/07/19 Python
Python调用C++程序的方法详解
2017/01/24 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Django中的Signal代码详解
2018/02/05 Python
详解python中的线程
2018/02/10 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
2014年语文教师工作总结
2014/12/18 职场文书
股东大会通知
2015/04/24 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android