编程 Javascript

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");
};

只做个人备忘，不做任何发表，不做信息交流。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现全屏预览F11功能的示例代码

- Author -

hover_lew

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

疯掉了,尽然有js写的操作系统

Apr 23 Javascript

Extjs学习笔记之二初识Extjs之Form

Jan 07 Javascript

{}与function(){}选用空对象{}来存放keyValue

May 23 Javascript

调用jQuery滑出效果时闪烁的解决方法

Mar 27 Javascript

Javascript玩转继承(一)

May 08 Javascript

js常用数组操作方法简明总结

Jun 20 Javascript

JQuery插件iScroll实现下拉刷新，滚动翻页特效

Jun 22 Javascript

jQuery使用empty()方法删除元素及其所有子元素的方法

Mar 26 Javascript

将form表单通过ajax实现无刷新提交的简单实例

Oct 12 Javascript

vue 实现axios拦截、页面跳转和token 验证

Jul 17 Javascript

vue权限路由实现的方法示例总结

Jul 29 Javascript

Vue 权限控制的两种方法(路由验证)

Aug 16 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