gpt4 book ai didi

javascript - 滚动条并刷新 JavaScript 中的一行

转载 作者:太空狗 更新时间:2023-10-29 16:46:05 25 4
gpt4 key购买 nike

我尝试在不使用 JQuery 的情况下编写自适应网页。但是我遇到了两个问题。1.当我放大窗口出现滚动条时,左边的线不能自动重绘。2.内容无法全部显示出来,见截图底部。我在下面的快照中标记了这两个问题。查看详情请到LINK ,谢谢你的帮助。 enter image description here我想上传快照,但由于信誉不足 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>

最佳答案

Use this replace you body code:
<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 style="position:absolute;left:50px;top:50px;z-index:-3333;"/>
<a href="images/q1.png"> question snapshot</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>

关于javascript - 滚动条并刷新 JavaScript 中的一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27653396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com