js之切换全屏和退出全屏实现代码实例
2019-09-09 14:16
1291 查看
这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
应用场景:
比如很多网页游戏全屏之类的,或者是网上看小说等。
核心代码:
//控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen").html("退出全屏"); var docElm = document.documentElement; //W3C if(docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if(elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } function exitfullscreen() { //退出全屏 $("#fullscreen").html("切换全屏"); if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if(document.msExitFullscreen) { document.msExitFullscreen(); } } var a = 0; $('#fullscreen').on('click', function() { a++; a % 2 == 1 ? enterfullscreen() : exitfullscreen(); })
前端代码:
<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切换全屏</a>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- JS+DIV实现鼠标划过切换层效果的实例代码
- JS 全屏和退出全屏详解及实例代码
- JS实现切换标签页效果实例代码
- JS 全屏和退出全屏详解及实例代码
- js实现的切换面板实例代码
- js实现各浏览器全屏代码实例
- JS实现切换标签页效果实例代码
- JS+DIV实现鼠标划过切换层效果的实例代码
- JS代码实例:实现随机加载不同的CSS样式
- JS+CSS实现4张图片滚动切换代码
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- js实现层的移动与上下层的切换,模仿他人代码 --firefox无法实现
- JS中实现replaceAll的方法(实例代码)
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- 基于js实现投票的实例代码
- Js+css实现的一款漂亮宽屏图片切换代码
- 使用jquery实现div的tab切换实例代码
- JS简单实现文件上传实例代码(无需插件)
- JS实现多物体缓冲运动实例代码
- spring框架中多数据源创建加载并且实现动态切换的配置实例代码