网页文字滚动效果如何做

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

相关推荐
总要学点什么37 分钟前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Agent世界2 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
FungLeo2 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
总要学点什么2 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
某哈压力大2 小时前
SSH 突然 Connection reset?不是密钥坏了,是 OpenSSL 把 sshd 干趴了
前端·node.js·命令行
程序员大阳2 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半3 小时前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
程序员大阳3 小时前
副队长ES6+教程(2)--let 与 const
前端·javascript·es6·const·let·var
deli0073 小时前
写满 200GB 后 SSD 为什么掉到 95MB/s?SLC 缓存模型实测
前端
曦樂~4 小时前
【Web Development】03JavaScript 基础和事件
开发语言·前端·javascript