javascript滚动代码求相助。
日期：2014-05-16 浏览次数：20358 次
javascript滚动代码求帮助。。。
<!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">
ul{
padding:0;
margin:0;
}
a:link,a:hover,a:active{
text-decoration:none;
color:#333;
font-size:12px;
}
.headerq{
width:420px;
height:20px;
border:#999 1px solid;
margin:0 auto;
line-height:20px;
text-align:center;
overflow:hidden;
}
.headerq li{
height:20px;
line-height:20px;
list-style-type:none;
}
</style>
</head>
<body>
<div id="header" class="headerq">
<ul>
<li><a href="#">dddddddddddddddd</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">cccccccccccccccc</a></li>
<li><a href="#">bbbbbbbbbbbbbbbb</a></li>
<li><a href="#">eeeeeeeeeeeeeeee</a></li>
<li><a href="#">oooooooooooooooo</a></li>
</ul>
</div>
<script language="javascript">
function RunTop(gaoDu,suDu,jianGe){
var RunTime;
var O = document.getElementById("header");
O.innerHTML += O.innerHTM;
O.scrollTop = 0;
function RunStart(){
RunTime = setInterval(RunStop,30);
O.scrollTop += 1;
}
function RunStop(){
if(O.scrollTop%20 != 0){ //取余数不等于0
O.scrollTop += 1;
if(O.scrollTop >= O.scrollHeight/2){
O.scrollTop = 0;
}
}else{
clearInterval(RunTime);
setTimeout(RunStart,2000);
}
}
setTimeout(RunStart,1);
}
RunTop();
</script>
</body>
</html>
以上是heml和javascript代码。 想问的问题就是： 我每个li的高度设置的是20px，理应滚动6次啊。但是上面的代码滚动到第三的时候就自动跳到第一个去了。（O.scrollHeight/2）应该是 120px的高度。嘛！ 但是 scrollheight的高度确是140px scrolltop的高度却是70了。并不是 60和120. 求大家帮忙解决下。。
------解决方案--------------------
O.innerHTML += O.innerHTM;
这个地方错了。应该是：
O.innerHTML += O.innerHTML;
<!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">
ul{
padding:0;
margin:0;
}
a:link,a:hover,a:active{
text-decoration:none;
color:#333;
font-size:12px;
}
.headerq{
width:420px;
height:20px;
border:#999 1px solid;
margin:0 auto;
line-height:20px;
text-align:center;
overflow:hidden;
}
.headerq li{
height:20px;
line-height:20px;
list-style-type:none;
}
</style>
</head>
<body>
<div id="header" class="headerq">
<ul>
<li><a href="#">dddddddddddddddd</a></li>
<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
<li><a href="#">cccccccccccccccc</a></li>
<li><a href="#">bbbbbbbbbbbbbbbb</a></li>
<li><a href="#">eeeeeeeeeeeeeeee</a></li>
<li><a href="#">oooooooooooooooo</a></li>
</ul>
</div>
<script language="javascript">
function RunTop(gaoDu,suDu,jianGe){
var RunTime;
var O = document.getElementById("header");
O.innerHTML += O.innerHTM;
O.scrollTop = 0;
function RunStart(){
RunTime = setInterval(RunStop,30);
O.scrollTop += 1;
}
function RunStop(){
if(O.scrollTop%20 != 0){ //取余数不等于0
O.scrollTop += 1;
if(O.scrollTop >= O.scrollHeight/2){
O.scrollTop = 0;
}
}else{
clearInterval(RunTime);
setTimeout(RunStart,2000);
}
}
setTimeout(RunStart,1);
}
RunTop();
</script>
</body>
</html>
以上是heml和javascript代码。 想问的问题就是： 我每个li的高度设置的是20px，理应滚动6次啊。但是上面的代码滚动到第三的时候就自动跳到第一个去了。（O.scrollHeight/2）应该是 120px的高度。嘛！ 但是 scrollheight的高度确是140px scrolltop的高度却是70了。并不是 60和120. 求大家帮忙解决下。。
------解决方案--------------------
O.innerHTML += O.innerHTM;
这个地方错了。应该是：
O.innerHTML += O.innerHTML;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
