网页文字滚动效果如何做

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

相关推荐
沙蒿同学4 小时前
不引 Ghostscript:我用纯 Go 给 PDF 做了一场「压缩手术」
前端·后端·github
Linux_cy4 小时前
服务器管理工具哪个好用?我用了七八个
运维·服务器·javascript·python·ssh·面板·gmssh
变与不变8065 小时前
jQuery细节以及使用应用场景
前端·javascript·jquery
SailingCoder7 小时前
【封闭结束1】端到端交付:Agent 一次请求如何走完全链路
前端·安全·ai·面试·agent·harness
风骏时光牛马9 小时前
AI多模块协同自动化工作流
前端
zhangminghuan9 小时前
前端面试应对技巧
前端·面试·职场和发展
计算机魔术师9 小时前
潜伏14年的PHP致命洞,AI跑两天就交卷了
前端
IT_陈寒9 小时前
Vue的这个响应式陷阱我居然现在才发现
前端·人工智能·后端
Python自动化直播10 小时前
智能脚本批量管理拆开看:导入、导出、重写、试听
前端·python·ai·秒播