滚动条并刷新JavaScript中的一行_Javascript_Html

滚动条并刷新JavaScript中的一行

javascript html

滚动条并刷新JavaScript中的一行,javascript,html,Javascript,Html,我尝试在没有JQuery的情况下编写自适应网页。但我遇到两个问题。 1.当我放大窗口后出现滚动条时，左行无法自动重画。 2.内容无法全部显示出来，请参见快照底部。我在下面的快照中标记了这两个问题。要查看详细信息，请转到，谢谢您的帮助。我想上传快照，但由于不到10次，我失败了。所以请访问我的个人页面查看快照。再次感谢我的代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

我尝试在没有JQuery的情况下编写自适应网页。但我遇到两个问题。 1.当我放大窗口后出现滚动条时，左行无法自动重画。 2.内容无法全部显示出来，请参见快照底部。我在下面的快照中标记了这两个问题。要查看详细信息，请转到，谢谢您的帮助。我想上传快照，但由于不到10次，我失败了。所以请访问我的个人页面查看快照。再次感谢

我的代码如下：

<!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 content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
</title>
<style type="text/css">
body
{ 
    margin:0px;
    padding:0px;
    border:0px;
    display:block;
    z-index:-9999;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    overflow:auto;
    font-family: Arial,Helvetica,sans-serif;
}
div.bg
{
    background-color:#fefefe;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    display:block;
    z-index:-8888;
}
</style>
<script language="javascript" type="text/javascript">
    var sw = 0, sh = 0;
    var b = true;
    function alignImg() {
        if (b) {
            document.getElementById("bot").style.top = (sh-40)+"px";
            document.getElementById("rig").style.left = (sw - 40) + "px";
            document.getElementById("debug").innerHTML = "sw: " + sw + " sh:" + sh + " f:" + b;
        }
        if (!b) {
            document.getElementById("bot").style.top = "66px";
            document.getElementById("rig").style.left = "66px";
            document.getElementById("debug").innerHTML = "reed.xia@gmail";
        }
        b = !b;
    }

    (function (d) {
        setInterval(function () {
            w = d.body.clientWidth;
            h = d.body.clientHeight || window.innerHeight;
            document.title = w + " : " + h;
            document.getElementById("bot").style.top = (sh-40)+"px";
            document.getElementById("rig").style.left = (sw-40)+"px";
            document.getElementById("cn").style.top = 300+"px";
            document.getElementById("cn").style.left = (sw - 112) / 2 + "px";
            document.getElementById("en").style.top = 500 + "px";
            document.getElementById("en").style.left = (sw-178)/2+"px";
            document.getElementById("pig").style.left = (sw - 210) / 2 + "px";
            document.getElementById("menu").style.left = (sw - 220) / 2 + "px";
            document.getElementById("debug").style.left = (sw - 146) / 2 + "px";
            if (sw !== w || sh !== h) {
                sw = w;
                sh = h;
            }


        }, 1);
    })(document)
</script>
</head>

<body id="body" >
<div class="bg" >
<div>
<a href="#" ><img src="images/circle-ydall.png" alt="circle-ydall" style="position:absolute;top:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<a href="#" ><img src="images/circle-wedall.png" alt="circle-wedall" style="position:absolute;top:0px;right:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<a href="#" ><img src="images/circle-yedall.png" alt="circle-yedall" style="position:fixed;bottom:0px;left:0px;width:40px;height:40px;z-index:-3333;background-color:#909090;" /></a>
<div id="menu" style="position:absolute;top:10px;left:40px;height:40px;z-index:-3333;">
<a href="#" ><img src="images/ydall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
<a href="#" ><img src="images/wedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
<a href="#" ><img src="images/yedall.png" alt="ydall" style="height:20px;z-index:-3333;background-color:#909090;"/></a>
</div>

<div id="pig" style="position:absolute;top:80px;left:100px;height:180px;z-index:-3333;">
<img src="images/bigAllIn1.png" alt="bigAllIn1" style="height:180px;z-index:-3333;background-color:#909090;"/>
</div>
</div>
<div id="cn" style="position:absolute;top:41px;left:41px;z-index:-6666;background-color:#e0e0e0;" >
<h4 style="color:#606060">欢迎来到云道！</h4>
<h4 style="color:#606060">属于您的逼格！</h4>
<a href="http://www.ycpai.com/p_21104">进入</a>
</div>

<img id="row" src="images/row.png" alt="seperate row" style="position:absolute;top:40px;width:100%;height:1px;z-index:-5555;" />
<img id="col" src="images/column.png" alt="seperate column" style="position:absolute;left:40px;width:1px;height:100%;z-index:-5555;" />
<img id="bot" src="images/row.png" alt="seperate row" style="position:fixed;top:215px;width:100%;height:1px;z-index:-5555;" />
<img id="rig" src="images/column.png" alt="seperate column" style="position:fixed;left:215px;width:1px;height:100%;z-index:-5555;" />


<div id="en" style="position:absolute;top:157px;left:17px;z-index:-6666;background-color:#b0b0b0;" >
<h4 style="color:#606060">Welcome to YDall.com!</h4>
<h4 style="color:#606060">Awesome only for you!</h4>
<a href="http://www.ycpai.com/p_21104">Enter</a>
</div>
<div style="position:fixed;bottom:0px;right:0px;height:40px;z-index:-6666;display:block;background-color:#b0b0b0;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<p id="debug" style="position:fixed;bottom:0px;left:60px;z-index:-2222;background-color:#909090;" >reed.xia@gmail.com</p>

</div>
<a href="#" onclick="alignImg()"><img src="images/favicon200x200.png" alt="favicon200x200" style="position:fixed;width:40px;height:40px;bottom:0px;right:0px;z-index:-3333;background-color:#909090;" /></a>
</body>
</html>


身体
{ 
边际：0px；
填充：0px；
边界：0px；
显示：块；
z指数：-9999；
宽度：100%；
身高：100%；
左：0px；
顶部：0px；
溢出：自动；
字体系列：Arial、Helvetica、无衬线字体；
}
分区背景
{
背景色：#fefe；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
显示：块；
z指数：-8888；
}
var-sw=0，sh=0；
var b=真；
函数alignImg（）{
如果（b）{
document.getElementById（“bot”）.style.top=（sh-40）+“px”；
document.getElementById（“rig”）.style.left=（sw-40）+“px”；
document.getElementById（“调试”）.innerHTML=“sw:+sw+”sh:+sh+”f:+b；
}
如果（！b）{
document.getElementById（“bot”）.style.top=“66px”；
document.getElementById（“rig”）.style.left=“66px”；
document.getElementById（“调试”）.innerHTML=“里德。xia@gmail";
}
b=！b；
}
（职能（d）{
setInterval（函数（）{
w=d.body.clientWidth；
h=d.body.clientHeight | | window.innerHeight；
document.title=w+“：”+h；
document.getElementById（“bot”）.style.top=（sh-40）+“px”；
document.getElementById（“rig”）.style.left=（sw-40）+“px”；
document.getElementById（“cn”）.style.top=300+“px”；
document.getElementById（“cn”）.style.left=（sw-112）/2+“px”；
document.getElementById（“en”）.style.top=500+“px”；
document.getElementById（“en”）.style.left=（sw-178）/2+“px”；
document.getElementById（“pig”）.style.left=（sw-210）/2+“px”；
document.getElementById（“menu”）.style.left=（sw-220）/2+“px”；
document.getElementById（“debug”）.style.left=（sw-146）/2+“px”；
如果（sw！==w | | sh！==h）{
sw=w；
sh=h；
}
}, 1);
})（文件）
欢迎来到云道！
属于您的逼格！
欢迎来到YDall.com！
只为你而精彩！


















簧片。xia@gmail.com

使用以下代码替换您的主体代码：
欢迎来到云道！
属于您的逼格！
欢迎来到YDall.com！
只为你而精彩！


















簧片。xia@gmail.com

我将您的答案代码与我的问题代码进行了比较，没有发现您的重大更改。你能给我个提示吗？谢谢