JavaScript 无缝上下滚动加定高停顿效果 _js 列表向上滚动并可停顿效果-CSDN博客

本文介绍了一种使用JavaScript实现的无缝上下滚动效果，通过自定义类和事件监听器来控制滚动的方向、速度及暂停机制，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从网上转载(http://www.cnblogs.com/skyblue/archive/2010/08/07/1794754.html)的一个关于JS的无缝上下滚动效果图,我准备把它搬到项目当中,所以先记录在博客里,方便之后查找.

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <mce:script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1">#idScroller *{margin:0px; padding:0px;} #idScroller{line-height:25px;width:100%; height:25px; overflow:hidden; border:1px solid #000000;} #idScroller ul{width:100%} #idScroller li{width:20%; float:left; overflow:hidden; list-style:none;}</style> <div id="idScroller"> <div id="idScrollMid"> <ul> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">111111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">211111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">311111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">411111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">511111111111111111111</a></li> <li><a href="http://shundebk.cn/" mce_href="http://shundebk.cn/">611111111111111111111</a></li> </ul> <div style="clear:both;" mce_style="clear:both;"></div> </div> </div> </body> </html>