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高级技巧分享
Feb 25 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 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 CURL获取返回值的方法
2014/05/04 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
理解JavaScript原型链
2016/10/25 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
行政人员岗位职责
2013/12/08 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
团组织推荐意见
2015/06/05 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Python面向对象之内置函数相关知识总结
2021/06/24 Python