Question

一段图片滚动效果的javascript代码中有一个地方不太明白

<!-- 指向链接图片url -->
<div id="demo" style="overflow:hidden;height:150px;width:90px;background:#214984;color:#ffffff">
<div id="demo1">
<!-- 定义图片 -->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</div>
<div id=demo2></div>
</div>

<script>
var speed=30;
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>

制作向下滚动的效果：
将上面“制作向上滚动的效果”中的红色字体Js部分替换成：

<script>
var speed=30;
demo2.innerHTML=demo1.innerHTML;
demo.scrollTop=demo.scrollHeight;
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight;
else{
demo.scrollTop--;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)};
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>

上面就是实现滚动图片效果的javascript代码

我想问的是
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight;
else{
demo.scrollTop--;
}
这段是什么意思?不是很理解.

Answer 1

好经典的移动！！1

首先呢，demo 的overflow属性为hide表示如果内容多出demo所设置的范围大小，则不显示滚动条。而本程序能运行的前提是demo里的内容不能太少，不然就没有scrollTop这个属性了，不信你把demo1里添加1个字，运行，然后添加200个字，运行，对比一下
滚动高度(scrollTop)： 原始滚动高度为0，向下滚动高度增加，向上滚动高度减少。即窗口内容头部距离窗口头部的距离。（解释的好挫。。打开一个窗口，拉到最下边的时候滚动高度最大，我们可以说成是滚动距离。）

那段代码的意思是
如果demo1的原始高度(差不多是8吧)减去它所在的滚动窗口（demo）的滚动距离>=0,即滚动到顶了
则把滚动高度加上demo2的相对高度，即瞬间拉下来
否则继续向上滚。