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代码要注意的几条规则
Sep 10 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
js实现随机点名程序
Sep 17 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
javascript实现雪花飘落效果
Aug 19 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使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JavaScript之自定义类型
2012/05/04 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Python检查ping终端的方法
2019/01/26 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
Java语言的优势
2015/01/10 面试题
中国梦口号
2014/06/13 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
详解MySQL中的pid与socket
2021/06/15 MySQL
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python