码迷,mamicode.com
首页 > 其他好文 > 详细

div的全屏与退出全屏

时间:2018-01-28 17:26:26      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:.com   function   cli   span   http   str   click   color   fun   

div的全屏与退出全屏

作用:将div全屏与退出全屏,一般播放器使用较多。

html按钮:

<button  onclick="showFull();">
                全屏
            </button>
<button onclick="delFull();"> 退出全屏 </button>

js调用:

function showFull(){
               var full=document.getElementById("container");
               launchIntoFullscreen(full);
            }

function delFull() {
                exitFullscreen();
            }

全屏方法封装:

 function launchIntoFullscreen(element) {
                if(element.requestFullscreen){
                    element.requestFullscreen();
                }
                else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                }
                else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }

退出全屏方法封装:

 function exitFullscreen() {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }

 

参考自:http://blog.sina.com.cn/s/blog_1458577430102xn4r.html

 

div的全屏与退出全屏

标签:.com   function   cli   span   http   str   click   color   fun   

原文地址:https://www.cnblogs.com/s313139232/p/8371548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!