JS实现单张或多张图片持续无缝滚动的示例代码
背景:
想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。
原理:
图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1、必须是没有设置过渡动画的,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。
实现:
html主要包含三块:
1、最外层盒子,用来展示滚动图的区域,overflow:hidden;
2、滚动的盒子,主要改变该盒子的定位值,来实现滚动,里面包含所有要滚动的图片或文字
3、包含图片或文字的盒子。
代码:
class Roll { constructor(opts) { this.elem = opts.elem; // 图片包含滚动长度的元素的 this.elemBox = opts.elemBox; //图片展示区域元素,为了获取展示区域的高度 this.direction = opts.direction; this.time = opts.time; this.init(); this.roll = this.roll.bind(this) this.startRoll = this.startRoll.bind(this) this.stopRoll = this.stopRoll.bind(this) } init(){ this.elemHeight = this.elem.offsetHeight; this.elemHtml = this.elem.innerHTML; this.elem.innerHTML = this.elem.innerHTML this.elemHtml this.elemHtml; this.speed; // 如果向上滚或者向左滚动每次减1,向下滚或者向右滚动每次加1 if(this.direction === 'top' || this.direction === 'left'){ this.speed = -1; }else{ this.speed = 1; } } roll(){ switch (this.direction) { case "top": // 如果滚动的盒子的top值超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){ this.elemBox.style.top = 0; }else{ this.elemBox.style.top = this.elemBox.offsetTop this.speed 'px'; } break; case "bottom": // 如果滚动的盒子的bottom值超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){ this.elemBox.style.bottom = 0; }else{ this.elemBox.style.bottom = this.elemBox.offsetBottom this.speed 'px'; } break; case "left": // 如果滚动的盒子的left超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){ this.elemBox.style.left = 0; }else{ this.elemBox.style.left = this.elemBox.offsetLeft this.speed 'px'; } break; case "right": // 如果滚动的盒子的right超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){ this.elemBox.style.right = 0; }else{ this.elemBox.style.right = this.elemBox.offsetRight this.speed 'px'; } break; default: // 默认向上滚动,如果滚动的盒子的top超出元素的高度,则置为0 if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){ this.elemBox.style.top = 0; }else{ this.elemBox.style.top = this.elemBox.offsetTop speed 'px'; } } } stopRoll(){ clearInterval(this.scrollTimer) } startRoll(){ this.scrollTimer = setInterval(this.roll,this.time) } }
参考链接:
https://www.teakki.com/p/590beb7be8136dfc5f21770d
原文链接:https://www.cnblogs.com/beileixinqing/archive/2020/05/08/12852938.html
(资源库 www.zyku.net)
您可能感兴趣的文章
- 06-26highlightjs网页代码高亮插件调用方法
- 05-10JS - 获取文件后缀,判断文件类型(比如是否为图片格式)
- 05-10js中!和!!的区别与用法
- 05-10js实现文章目录索引导航(table of content)
- 05-10js根据后缀判断文件文件类型的代码
- 05-10JS端基于download.js实现图片、视频时直接下载而不是
- 04-02CentOS安装Nodejs教程
- 02-11JS操作剪贴板代码详解
- 01-04帝国CMS页面JS调用登录状态loginjs.php中获取会员头像
- 11-30CentOS下安装并配置nodejs环境教程
- 12-29咖啡约车-咖啡约车应用软件功能介绍
- 12-16一加7pro专业拍照模式在哪里
- 11-23ios15设置电话降噪步骤介绍
- 07-15帝国6.5点击图片进入下一页
- 02-23DedeCMS删除自定义变量的方法
- 01-19玖梦影院-玖梦影院应用软件功能介绍
- 10-24watchos8怎么设置手势功能
- 07-05Linux pwd命令
- 12-09苹果13怎样开启无线反向充电
- 12-27城小班司机端-城小班司机端应用软件功
最近更新
阅读排行
猜你喜欢
- 01-13舒医汇-舒医汇应用软件功能介绍
- 10-242021淘宝天猫京东双11时间及满减规则
- 03-19一加9pro开启红包提醒操作方法
- 12-15iqoo8怎么设置自动锁屏
- 02-18css3加js做一个简单的3D行星运转效果
- 01-08音频裁剪-音频裁剪应用软件功能介绍
- 07-05Linux mformat命令
- 01-11番茄清理-番茄清理应用软件功能介绍
- 04-11小米11ultra开启120hz高屏刷新率方法
- 02-20Ubuntu 14.04上安装ftp和tftp服务