JS实现指定区域的全屏显示功能示例
2019-04-25 18:01
691 查看
本文实例讲述了JS实现指定区域的全屏显示功能。分享给大家供大家参考,具体如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net js指定区域全屏</title> <style> #fulldiv { background: #fff; width: 100%; text-align: center; height: 100%; } </style> </head> <body> <h1>指定区域全屏测试</h1> <button id="btn">全屏按钮</button> <div id="fulldiv"> <h1>这里是全屏显示的内容</h1> </div> </body> <script> var fullscreen = false; let btn = document.getElementById('btn'); let fullarea = document.getElementById('fulldiv') btn.addEventListener('click',function(){ if (fullscreen) { // 退出全屏 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } else { // 进入全屏 if (fullarea.requestFullscreen) { fullarea.requestFullscreen(); } else if (fullarea.webkitRequestFullScreen) { fullarea.webkitRequestFullScreen(); } else if (fullarea.mozRequestFullScreen) { fullarea.mozRequestFullScreen(); } else if (fullarea.msRequestFullscreen) { // IE11 fullarea.msRequestFullscreen(); } } fullscreen = !fullscreen; }) </script> </html>
感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS实现全屏预览F11功能的示例代码
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- vue.js使用v-if实现显示与隐藏功能示例
- JS实现选定指定HTML元素对象中指定文本内容功能示例
- JS实现静态页面搜索并高亮显示功能完整示例
- JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
- jsp js 鼠标移动到指定区域显示选项卡示例,离开时不显示
- jsp js 鼠标移动到指定区域显示选项卡示例,离开时不显示
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- vue.js实现格式化时间并每秒更新显示功能示例
- JS实现密码框的显示密码和隐藏密码功能示例
- Asp.net如何使用access数据库做profile实现按照区域显示相应语言功能
- JS基于面向对象实现的拖拽功能示例
- JS实现当前编辑行自动滚动至div显示区域
- js仿淘宝在分页导航中实现跳转到指定分页功能
- JS基于FileSaver.js插件实现文件保存功能示例[原创]_javascript技巧_脚本之家
- JS基于面向对象实现的多个倒计时器功能示例
- JS小功能(setInterval实现图片效果显示时间)实例代码
- JS实现点击颜色块切换指定区域背景颜色的方法
- js 实现全屏预览(F11功能)