簡(jiǎn)單JS調(diào)整背景自適應(yīng)

ID:83710 · 發(fā)表于 2015-6-25 15:28

   網(wǎng)上的代碼，看一眼。

JS動(dòng)態(tài)調(diào)整<img/>標(biāo)簽的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>背景圖自適應(yīng)</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>   由于站長(zhǎng)拖欠馬大老板主機(jī)費(fèi)用，服務(wù)器被迫收回。現(xiàn)站點(diǎn)正往阿里空間上轉(zhuǎn)移，在此期間對(duì)大家造成的影響深表歉意！(PS：我知道也沒有人來。。。)如有緊急事務(wù)請(qǐng)聯(lián)系站長(zhǎng)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">
            // 注冊(cè)事件，瀏覽器初始化與窗體改變大小時(shí)觸發(fā)
            window.onresize = window.onload = function () {
                  var w, h;
                  if (!!(window.attachEvent && !window.opera)) {  // 判斷瀏覽器是否為Opera并且支持attachEcent時(shí)間，注："!!"為雙非，將undefined,null,""轉(zhuǎn)換為false其他轉(zhuǎn)為true
                     h = document.documentElement.clientHeight;
                     w = document.documentElement.clientWidth;
                  } else {
                     h = window.innerHeight; // 獲取窗體內(nèi)高
                     w = window.innerWidth;  // 獲取窗體內(nèi)寬
                  }
                  var bgImg = document.getElementById('bg').getElementsByTagName('img')[0]; // 查找TagName為'img'的第一個(gè)對(duì)象
                  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>

粗糙的效果圖：

帳號(hào)		自動(dòng)登錄	找回密碼
密碼			立即注冊(cè)

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

簡(jiǎn)單JS調(diào)整背景自適應(yīng)

相關(guān)帖子