网页文字滚动效果如何做

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

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

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

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

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

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

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

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

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

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

名单类文字如何垂直滚动

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

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

公告栏如何逐条向上滚动

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

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

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

相关推荐
liangshanbo12151 小时前
面试题:React 中 Lane 和 Scheduler 是怎么配合的?
前端·react.js·前端框架
liangshanbo12151 小时前
请求拦截器相关面试题
java·前端·javascript
ShawnLiaoking1 小时前
ADS305 Big Data Lecuture4 Web Scraping
大数据·前端
liangshanbo12151 小时前
React面试题:Hooks 为什么不能在分支和循环里面写?
前端·javascript·react.js
开开心心就好1 小时前
视频压缩工具推荐,绿色版免安装双击即用
java·前端·人工智能·spring·智能手机·intellij-idea·excel
redfred1 小时前
HyperFrames 部署教程:5.6 万 Star 开源「写 HTML 出视频」框架,Windows 从零上手(CLI 三条命令 + 7 个避坑)
ffmpeg·开源·自动化·html·音视频
西红柿炖牛腩3542 小时前
GLB 转 OBJ/PLY 后体积没变?3D 模型不减面变小靠什么
前端·javascript·3d
欣欣之王来了2 小时前
前端开发学习路线图:2026年Vue方向最新版
前端·学习·架构·项目·vue3教程
夏幻灵2 小时前
前端八股:Vue2 与 Vue3 的核心区别:响应式、Composition API 与性能优化
前端