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 插件开发指南
Nov 14 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
微信小程序实现图片上传功能
May 28 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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文件上传的简单实例
2013/10/19 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
php和nginx交互实例讲解
2019/09/24 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
更优雅的事件触发兼容
2011/10/24 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python 排列组合之itertools
2013/03/20 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
为什么要用EJB
2014/04/17 面试题
学前班评语大全
2014/05/04 职场文书
代办社保委托书范文
2014/10/06 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
博士论文答辩开场白
2015/06/01 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers