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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
js+css3实现旋转效果
Jan 20 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Vue中jsx不完全应用指南小结
Nov 01 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
吃通javascript正则表达式
Apr 21 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
一个分页的论坛
2006/10/09 PHP
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php 禁止页面缓存输出
2009/01/07 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JS画线(实例代码)
2013/11/20 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
速记Python布尔值
2017/11/09 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
中学门卫岗位职责
2013/12/26 职场文书
高中生期末评语大全
2014/01/28 职场文书
法学自荐信
2014/06/20 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
2015年财政所工作总结
2015/04/25 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Go语言测试库testify使用学习
2022/07/23 Golang
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS