简单JS调整背景自适应

ID:83710 · 发表于 2015-6-25 15:28

   网上的代码，看一眼。

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>

粗糙的效果图：

帐号		自动登录	找回密码
密码			立即注册

简单JS调整背景自适应

相关帖子