CSS网页全屏

来源:互联网 发布:windows loader好用吗 编辑:程序博客网 时间:2024/05/16 19:45


<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>全屏</title></head><body ><style> #fullscreen{width:40px;height:40px;position:fixed;top:20px;right:20px;opacity:0.4; }     </style><div id="fullscreen" fullflag ="0">全屏</div><script>    document.getElementById("fullscreen").onclick=function(){    //var elem = document.getElementById("content");    //var h1 = document.getElementById("h1");    //requestFullScreen(elem);// 某个页面元素var flag =this.getAttribute("fullflag");if(flag == 0){requestFullScreen(document.documentElement);// 整个网页this.innerHTML= "退出";this.setAttribute("fullflag",'1');}else{this.innerHTML="全屏";this.setAttribute("fullflag",'0');exitFull()}    };function requestFullScreen(element) {    // 判断各种浏览器,找到正确的方法    var requestMethod = element.requestFullScreen || //W3C    element.webkitRequestFullScreen ||    //Chrome等    element.mozRequestFullScreen || //FireFox    element.msRequestFullScreen; //IE11    if (requestMethod) {        requestMethod.call(element);    }    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer        var wscript = new ActiveXObject("WScript.Shell");        if (wscript !== null) {            wscript.SendKeys("{F11}");        }    }}//退出全屏 判断浏览器种类function exitFull() {    // 判断各种浏览器,找到正确的方法    var exitMethod = document.exitFullscreen || //W3C    document.mozCancelFullScreen ||    //Chrome等    document.webkitExitFullscreen || //FireFox    document.webkitExitFullscreen; //IE11    if (exitMethod) {        exitMethod.call(document);    }    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer        var wscript = new ActiveXObject("WScript.Shell");        if (wscript !== null) {            wscript.SendKeys("{F11}");        }    }}    </script></body></html>

原创粉丝点击