网页文字滚动效果如何做

2026-10-04 技术分享

导航下的通知条、页脚合作单位、活动页中奖名单,都要在一块不大的区域里把字滚起来。本页按常见需求给了五种:单行从左往右、多行从上往下、列表无缝横向、名单无缝纵向、公告一次只露一条并往上换。单行和多行只依赖 jQuery;列表无缝还要 jquery.SuperSlide.2.1.1.js。脚本都写在 js/textScroll.js,jQuery、SuperSlide、业务脚本这个顺序不能反。

单行文字如何横向循环滚动

外层 .gunText-warp 定高 50、超出隐藏。里面一个 span.guntext 绝对定位,靠改 left 往左移。移出可视区后,把 left 设回容器宽度,字从右侧再进来,形成循环。

图片1.png

图片2.png

图片3.png

50 是每步间隔毫秒,越小滚得越快。+ 30 让字完全出去前稍留一点余量,可按字号微调。文案改 span 里的字即可。

多行文字如何垂直循环滚动

容器 .gunShu-warp 高度 100,只能看见大约五行。ul 绝对定位,改 top 往上移;整列移出后,把 top 设回容器高度,从下方再进来。

图片4.png

图片5.png

每条 li 高度 20,和行高一致,对不齐时先改这两处。条目从接口来时,先拼好 ul 再调用 scrollTextY。

列表文字如何横向无缝滚动

合作单位、友情链接这类一长串名称,用 SuperSlide 的 leftMarquee。结构分 .hd 左右箭头和 .bd 里的 ul。箭头图是 images/s1-c8left.jpg、s1-c8right.jpg,可点区域加了手型。

图片6.png

图片7.png

vis 是大约可见几条,interTime 越小滚得越快。trigger: "click" 表示点箭头才切方向。链接写在每个 a 的 href 上。漏引 SuperSlide 时 .slide 不是函数,控制台会报错。这坑我见过不止一次。

名单类文字如何垂直滚动

手机号、中奖名单常见只露两三行、不停往上走。同样用 SuperSlide,效果改成 topMarquee,容器高度按「行高 × 可见行数」来。本例行高 26、vis: 2,所以盒子高度 52。

图片8.png

图片9.png

条目少于 vis 时看起来几乎不动,名单要多备几条。号码从接口来就替换 li 文本,初始化仍是这一段。

公告栏如何逐条向上滚动

只露一行,每隔两秒整条顶上去,第一条移到列表末尾,下一条顶上来。高度、行高都是 35,动画距离写成 -35px,三者必须一致,否则会露半行或留白。

图片10.png

图片11.png

500 是这一条滚完用的毫秒,2000 是两条之间的间隔。过长的标题用省略号裁掉,避免撑破单行。这一套只用 jQuery,不必引 SuperSlide。

五种里挑和栏目匹配的那一种拷走即可。速度、高度、文案按设计改;列表无缝记得带上 SuperSlide 和箭头图。

案例下载
下载demo本地运行
技术分享