jQuery 浏览器全屏

这个小编没什么说的，小编就直接上代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 浏览器全屏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
</head>
<style type="text/css">
	
    /*全屏按钮css样式*/
    .screenBuooton{
        width:50px;
        height:50px;
        background:red;
        position:fixed;
        top:40px;
        right:40px;
    }

</style>
<body>
    
    <!--顶部点击全屏-->
    <div class="screenBuooton"></div>

</body>
<!--引入外部的jQuery文件-->
<script src="https://misc.360buyimg.com/??jdf/lib/jquery-1.6.4.js,mtd/pc/common/js/o2_ua.js,mtd/pc/base/1.0.0/event.js"></script>
<script type="text/javascript">
    //jQuery ES6简写定义
    $(()=>{
        $(".screenBuooton").click(()=>{
            //判断是否全屏
            var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
            if (fullscreenElement == null) {
                //调用全屏开始方法
                screenBegin();
            } else {
                //调用全屏结束方法
                screenFinish();
            }
        })

        //全屏开启方法
        function screenBegin(){
            var docE = document.documentElement;
            if (docE.requestFullScreen) {
                docE.requestFullScreen();
            } else if (docE.mozRequestFullScreen) {
                docE.mozRequestFullScreen();
            } else if (docE.webkitRequestFullScreen) {
                docE.webkitRequestFullScreen();
            }
        }

        //全屏结束方法
        function screenFinish(){
            var docE = document;
            if (docE.screenFinish) {
                 docE.screenFinish();
            } else if (docE.mozCancelFullScreen) {
                docE.mozCancelFullScreen();
            } else if (docE.webkitCancelFullScreen) {
                docE.webkitCancelFullScreen();
        }
    }
</script>
</html>
文章评论
