JS代码：图片由下向上不间断滚动，滚动到第二遍时写的CSS样式无效了，求指导！

Question

代码如下：
<div id=demo style="overflow:hidden; width:220px; height:800px; border:1px solid #ddd;">
<div id=demo1>
<ul>
<li><a href="cpzx.asp"><img name="红色防火门" src="images/cp/gzfhm/5.jpg" width="130" height="180" alt="红色防火门"><p>红色防火门</p></a></li>
<li><a href="cpzx.asp"><img name="钢木子母带玻璃防火门" src="images/cp/gmzfhm/5.jpg" width="130" height="180" alt="钢木子母带玻璃防火门"><p>钢木子母带玻璃防火门</p></a></li>
..........
<li><a href="cpzx.asp"><img name="钢质防火窗" src="images/cp/fhc/3.jpg" width="130" height="180" alt="钢质防火窗"><p>钢质防火窗</p></a></li>
</ul>
</div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=20
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
加了些样式，滚动时就是一次CSS有效，一次无效不间断滚动，为何啊？
CSS：
#demo1{
width:130px;
margin:0 auto;
}
#demo1 ul li a{
width:130px;
font-size:12px;
color:#000;
}
#demo1 ul li a p{
width:130px;
text-align:center;
line-height:2.5em;
margin-bottom:10px;
}

Answer 1

我的测试结果是这样的：
demo2.innerHTML=demo1.innerHTML;
//demo1.offsetHeight=783 demo2.offsetHeight=773
//demo2.offsetTop=792 scrollTop=752时停止
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=40)

当它停止的时候，还差40，所以，改成<=40　就可以了。

当scrollTop=752时，它是停止，是因为滚动条已经到底了，不能再滚动了，所以停止了。
但是，
demo1.offsetHeight=783
demo2.offsetHeight=773

这两个数据为什么不一样，我就不太理解了。楼主如果知道为什么的话，麻烦告诉我一下。

（噢，对了，差点忘了，因为楼主原引用的图片，我这里无法显示，于是，我就换了一张图片，但如果是原图片的话，上面三个数据也应该会是不一样的！楼主可以测试一下。）

追问

非常感谢，不懂为何demo2.offsetTop-demo.scrollTop<=0不成立，水平方向滚动的代码就没问题。还有重要一点，要如何测试啊？

追答

我用的方法很简单，在用到某个变量的时候，需要知道它的值是不是我们想要的那个，可以在那个位置加个alert(demo1.offsetHeight); 之类的。

在你用的if语句之前，用alert判断一下各个变量的值就可以了。

但是，你这个代码我测试下来，就是没有明白这两个值一直都不相等：
demo1.offsetHeight=783
demo2.offsetHeight=773

这点我也感觉很奇怪。