抄来的全屏js

浏览数：25 / 时间：2015年06月09日

<!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>