5
Próbuję napisać moją adaptacyjną stronę internetową bez JQuery. Ale napotykam dwa problemy. 1. Kiedy pasek przewijania pojawi się, ponieważ powiększam okno, lewa linia nie może automatycznie przerysowywać. 2. Treść nie może wyświetlić wszystkich, zobacz dno migawki. Te dwa problemy zostały oznaczone w poniższej migawce. Aby zobaczyć szczegóły, przejdź do LINK, dziękuję za pomoc. 
Chcę przesłać migawkę, ale mi się nie udało z powodu mniejszej niż 10 reputacji. Proszę odwiedzić moją osobistą stronę, aby zobaczyć migawkę. Dzięki jeszcze raz.Pasek przewijania i odświeżanie wiersza w JavaScript
Moje kodu jest poniżej:
<!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 = "[email protected]";
}
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;" >[email protected]</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>
Mam porównaniu kod odpowiedź z mojego kodu zapytania, a nie mogę znaleźć znaczące zmiany. Czy możesz dać mi swoją wskazówkę? Dzięki –