你可能要问了,怎么有多余的5行?呵呵,其实代码中已经解释了:
// 创建复制内容节点 var copydiv = document.createElement('div'); // 这个地方感觉有点嵌妥 // 直接使用element.id的方式,不过看上去,主流的浏览器都支持 // 标准的DOM Core方法: // copydiv.setAttribute('id',s_area.id + "_copymsgid") copydiv.id = s_area.id + "_copymsgid"; // 复制原始的信息 // 将原始的信息s_msg中的内容,直接用innerHTML写到 copydiv.innerHTML = s_msg.innerHTML; // 设置复制信息节点的高度 copydiv.style.height = this.msgHeight + "px"; // 将复制节点添加到原始接点(scrollMsg)后 // 其实实现的方法就是将复制信息节点(copydiv)添家到显示区域的节点(scrollArea)中 s_area.appendChild(copydiv);
因为我们又复制了一份信息,并添加到要显示滚动信息的容器中了,所以3行变6行了。
呵呵,接下的也没有什么好讲了,大家看我的注释,应该可以很清楚了。唯一要注意的一点就是这里
// 滚动高度等于显示滚动区域高度时(滚动完一行,一行内容全部显示) // 暂停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的方法,大家还是需要不断的学习,可能才能完全明白和掌握,我这里不可能一一都讲清楚。好了,收工!
经典论坛交流: http://bbs.blueidea.com/thread-2896417-1-1.html
本文链接:http://www.blueidea.com/tech/web/2008/6286.asp
出处:蓝色理想
责任编辑:moby
上一页 不间断滚动图片Javascript特效讲解 [3] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|