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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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图片验证码制作实现分享(全)
2012/05/10 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
PyQt5实现下载进度条效果
2018/04/19 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Ref与out有什么不同
2012/11/24 面试题
公立医院改革实施方案
2014/03/14 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
博士给导师的自荐信
2015/03/06 职场文书
慈善募捐倡议书
2015/04/27 职场文书
主题班会开场白
2015/06/01 职场文书
股东协议书范本2016
2016/03/21 职场文书
python小程序之飘落的银杏
2021/04/17 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技