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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
详解JavaScript常量定义
Jan 03 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue-prop父组件向子组件进行传值的方法
Mar 01 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
php字符串截取的简单方法
2013/07/04 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
Python如何定义一个函数
2015/09/01 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
争先创优公开承诺书
2014/08/30 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书