JavaScript字幕滚动效果

最新推荐文章于 2025-12-04 17:39:28 发布

转载最新推荐文章于 2025-12-04 17:39:28 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Joyin/archive/2010/05/02/2262125.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一个简单的自动滚动列表实现方法，通过JavaScript控制ul元素的scrollTop属性，实现列表项的连续滚动效果。注意需要设置overflow:hidden样式，以隐藏超出部分，达到良好的视觉效果。

其中要注意的：overflow:hidden，否则会全部显示，达不到效果。

使用时可以对ul.scrollTop >= 195这一句的数字进行设置。达到平滑过渡的作用。

<!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 runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <ul id="scroll" style="overflow:hidden;height:100px;width:200px"> <li>滚动效果一</li> <li>滚动效果二</li> <li>滚动效果三</li> <li>滚动效果四</li> <li>滚动效果五</li> <li>滚动效果六</li> <li>滚动效果七</li> <li>滚动效果八</li> <li>滚动效果九</li> <li>滚动效果十</li> <li>滚动效果一</li> <li>滚动效果二</li> <li>滚动效果三</li> <li>滚动效果四</li> <li>滚动效果五</li> <li>滚动效果六</li> <li>滚动效果七</li> <li>滚动效果八</li> <li>滚动效果九</li> <li>滚动效果十</li> </ul> <mce:script type="text/javascript"></mce:script> </div> </form> </body> </html>

转载于:https://www.cnblogs.com/Joyin/archive/2010/05/02/2262125.html