网页文字滚动效果如何做

导航下的通知条、页脚合作单位、活动页中奖名单,都要在一块不大的区域里把字滚起来。本页按常见需求给了五种:单行从左往右、多行从上往下、列表无缝横向、名单无缝纵向、公告一次只露一条并往上换。单行和多行只依赖 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 和箭头图。

相关推荐
代码搬运媛2 小时前
原生websocket 双工demo
前端
limit00752 小时前
三维 WebGIS 工具选型:加载、样式、分析、交付,一套界面能做完什么
android·前端·web3·安卓·webgl
全栈项目管理程序猿2 小时前
ArcGIS JS 基础教程(35):体元系列 - VoxelLayer 时间维度动画
前端·javascript
mantou1322 小时前
从纯 CSR 到 SSR:用 WebComponents 做一个 Next.js 式框架 Gemkit
前端·全栈·web components
cidy_982 小时前
深度拆解任务工作台架构:左右分栏、队列管理、实时刷新全方案
前端
Linye2 小时前
告别“PRD 与原型两张皮”!我们把可交互原生组件直接嵌进了需求文档,还能双向回写 Markdown
前端
deli0072 小时前
RSA 为什么公开公钥也解不开?2 个质数拆开实测一遍
前端
ModyQyW2 小时前
vite-plugin-uni-pages 0.6:统一扫描规则,开发期少重启
前端·uni-app
门思科技2 小时前
把 ThinkLink 接进 Home Assistant 与 Node-RED:一条 MQTT 转发器能走通的路
前端
没事写点啥3 小时前
WeKnora 回答溯源
前端·后端·ai编程