垂直无缝滚动图片（兼容性好）实例教程源码下载（5）

呵呵，接下的也没有什么好讲了，大家看我的注释，应该可以很清楚了。唯一要注意的一点就是这里

// 滚动高度等于显示滚动区域高度时（滚动完一行，一行内容全部显示）// 暂停4秒中，然后再开始执行下依次滚动。if (o.scrollHeight ％ s_area.offsetHeight == 0) {  o.scrollTimer = setTimeout(anim, o.speed);}else {// 在两行内容之间过度滚动时，每10豪秒上升1px  o.scrollTimer = setTimeout(anim, 10);}

o.scrollHeight ％ s_area.offsetHeight == 0，要明白它确切的意思。

#container{  margin:0 auto;  margin-top:10px;  width:720px;  height:100px;  overflow:hidden;}#message,#message_copymsgid{  margin:0;  width:720px;  overflow:hidden;}#container ul{  float:left;  width:720px;  height:100px;  overflow:hidden;  clear:both;}

ul也就是我们一行的高度为100px，o.scrollHeight已经滚动的高度。呵呵，不知道你发现了问题没有？

对了，问题就在 ％ s_area.offsetHeight，我之所以没有更正原程序里的这个缺点，是因为如果你不对#container做任何修饰，这么写没有错。因为 s_area也就是#container这里我只定义了height:100px;，如果我要是这么写：

#container{  margin:0 auto;  margin-top:10px;  width:720px;  height:100px;  overflow:hidden;  border:1px;  padding:1px;}

呵呵，你觉得会有什么结果？这里我就卖个官子，给大家出个作业，看看像我这样做了会，有一个什么结果，还有o.scrollHeight ％ s_area.offsetHeight == 0要怎么改该呢？

好了，特效讲解完毕，也不知道我这么讲解一个特效，对你有没有帮助。像里面的ceateElement,appendChild等等DOM的方法，大家还是需要不断的学习，可能才能完全明白和掌握，我这里不可能一一都讲清楚。好了，收工！

• 程序来源：雅虎中国 scrollVertical.js

• 程序修改：www.yaohaixiao.com

• 演示地址：http://www.yaohaixiao.com/scripts/scrollnews/index.html

• 立刻下载：scrollnews.rar  scrollnews.rar （78.97 KB）