久久久久久久999_99精品久久精品一区二区爱城_成人欧美一区二区三区在线播放_国产精品日本一区二区不卡视频_国产午夜视频_欧美精品在线观看免费

標題: 簡單JS調整背景自適應 [打印本頁]

作者: hongniu 時間: 2015-6-25 15:28
標題: 簡單JS調整背景自適應
   網上的代碼，看一眼。

JS動態調整<img/>標簽的width與height 屬性。

代碼：
      <!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>
         <style type="text/css">
            *
            {
                  margin: 0;
                  padding: 0;
            }
            #bg
            {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  z-index: -999;
            }
         </style>
      </head>
      <body>
         <div id="bg">
            <img src="http://c.51hei.com/a/a/b/56257312737616.jpg" />
         </div>
         <div id="div_Notice" style="width: 700px; margin-left: auto; margin-right: auto;">
            <span>
                  <br />
                  <h3>
                     通知：</h3>
                  <br />
                  <br />
                  <b>   由于站長拖欠馬大老板主機費用，服務器被迫收回。現站點正往阿里空間上轉移，在此期間對大家造成的影響深表歉意！(PS：我知道也沒有人來。。。)如有緊急事務請聯系站長QQ：616620664(郵箱：<a
            href="mailto:admin@taekwondoshow.com"><b>admin@taekwondoshow.com</b></a>)</b>
                  <br />
                  <br />
                  <br />
                  <br />
                  <b style="float: right;">跆拳道的秀</b>
                  <br />
                  <br />
                  <b style="float: right;">2015-03-12</b> </span>
         </div>
         <script type="text/javascript">
            // 注冊事件，瀏覽器初始化與窗體改變大小時觸發
            window.onresize = window.onload = function () {
                  var w, h;
                  if (!!(window.attachEvent && !window.opera)) {  // 判斷瀏覽器是否為Opera并且支持attachEcent時間，注："!!"為雙非，將undefined,null,""轉換為false其他轉為true
                     h = document.documentElement.clientHeight;
                     w = document.documentElement.clientWidth;
                  } else {
                     h = window.innerHeight; // 獲取窗體內高
                     w = window.innerWidth;  // 獲取窗體內寬
                  }
                  var bgImg = document.getElementById('bg').getElementsByTagName('img')[0]; // 查找TagName為'img'的第一個對象
                  bgImg.width = (w - 5);
                  bgImg.height = (h - 5);
                  document.getElementById("div_Notice").style.marginTop = (h / 3.7) + "px";
                  document.getElementById("div_Notice").style.width = (w / 2) + "px";
                  document.getElementById("div_Notice").style.height = (h / 4) + "px";
            }
         </script>
      </body>
      </html>

粗糙的效果圖：

歡迎光臨 (http://m.zg4o1577.cn/bbs/)