标题: 简单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>&nbsp;&nbsp; 由于站长拖欠马大老板主机费用，服务器被迫收回。现站点正往阿里空间上转移，在此期间对大家造成的影响深表歉意！(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://www.51hei.com/bbs/) Powered by Discuz! X3.1