jQuery实现单行、多行及可控方向滚动效果示例
作者：小满时间：2026-10-24 22:05:26浏览：592
本文提供基于jQuery的三种滚动效果实现代码：单行公告滚动、批量多行滚动以及支持向前向后控制的多行滚动。示例包含HTML结构与CSS样式，需注意引入外部JS后刷新页面方可生效。
jQuery滚动效果实现概述
运行以下代码后，需刷新页面以加载jQuery，否则无法看到滚动效果。
1、单行滚动效果
单行滚动效果示例
<!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" c /> <title>无标题文档</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> </head> <body> <div id="scrollDiv"> <ul> <li>百度 www.baidu.com</li> <li>本站 www.jb51.net</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </html>[Ctrl+A 全选 注:引入外部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> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> </head> <body> <p>多行滚动演示：</p> <div id="scrollDiv"> <ul> <li>百度 www.baidu.com</li> <li>本站 www.jb51.net</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> </body> </html>[Ctrl+A 全选 注:引入外部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> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> </head> <body> <p>多行滚动演示：</p> <div id="scrollDiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> <span id="btn1">向前</span> <span id="btn2">向后</span> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53