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环境教程
- 10-26华为ai音箱2怎样配对手机
- 08-09网易云阅读app怎么设置阅读口味?
- 09-22微博怎么隐藏头像相册
- 09-11红米k40如何开启性能模式
- 11-15华为手机电子三包凭证在哪里
- 01-13dedecms文章页上一篇与下一篇标题长度
- 01-13织梦DedeCms的安全问题解决办法(安全
- 02-20Ubuntu安装字体教程
- 12-25超凡学车-超凡学车应用软件功能介绍
- 09-28CentOS 7搭建lsyncd实现两台服务器文

最近更新
阅读排行
猜你喜欢
- 09-252022考研预报名流程分享
- 04-08使用Jquery.Validate通过正则表达式自
- 02-22DedeCMS更换安装目录后需要修改的内容
- 09-27央视频全运会闭幕式直播预约步骤分享
- 03-12帝国CMS如何调用相关文章
- 12-27聚力成师-聚力成师应用软件功能介绍
- 11-22apache 将不带www的域名定向到带www的
- 08-12咪咕音乐怎么取消自动续费?
- 11-23爱奇艺下载视频路径查询方法介绍
- 02-23DedeCMS默认编辑器将回车br标签改为p