<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.4.min.js"></script> <style type="text/css"> .fullscreenbtn { top:15px !important; border-color: #CCC !important; position: fixed !important; z-index: 9999; } .fullscreenbtn:hover { background: #EFEFEF; } </style> <script type="text/javascript"> $(function(){ // fullScreen function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if(element.msRequestFullScreen) { element.msRequestFullScreen(); }else{ return true; } } function cancelFullScreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if(document.msExitFullscreen) { document.msExitFullscreen(); }else{ return true; } } // if(window.location.href.indexOf("http://www.cnblogs.com/hustskyking/p/") > -1 // && !/MSIE/i.test(navigator.userAgent.toLowerCase())){ // $("#content").css("position","relative").prepend( // "<span id='fullscreenbtn' style='position:absolute;right:18px;" + // "top:0;background:#F5F5F5;_display:none;color:red;font-size:16px;" + // "padding:8px;border:1px solid transparent;cursor:pointer;border-radius:6px'>" + // "进入全屏" + // "</span>"); // 启动全屏模式 $("#fullscreenbtn").click(function(){ if($(this).hasClass("fullscreenbtn")){ if(cancelFullScreen()) return; $(this).text('进入全屏').removeClass("fullscreenbtn"); $("#content").css({ "margin-right": 465, "padding": 0, "overflow":"hidden" }); return; } if(launchFullScreen($("#content").get(0))) return; $(this).toggleClass("fullscreenbtn"); $(this).text('退出全屏').addClass("fullscreenbtn"); $("#content").css({ "margin-right": 0, "padding": "25px 15px", "overflow":"auto" }) $(window).trigger("resize"); }); // fix fullscreen bug $(document).bind('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function(){ if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { $("#fullscreenbtn").text('进入全屏').removeClass("fullscreenbtn"); $("#content").css({ "margin-right": 465, "padding": 0, "overflow":"hidden" }); } // }); // } }); }); </script> </head> <body> <div style="position: relative; margin-right: 465px; padding: 0px; overflow: hidden;" id="content" > 123 <span id="fullscreenbtn" style="position: static ;top:0;background:#F5F5F5;_display:none;color:red;font-size:16px;padding:8px;border:1px solid transparent;cursor:pointer;border-radius:6px;">进入全屏</span> </div> </body> </html>
出处：http://www.cnblogs.com/hustskyking/p/3578232.html