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
总结
到此这篇关于JS实现单张或多张图片持续无缝滚动的文章就介绍到这了,更多相关js 图片 无缝滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
TypeScript中使用getElementXXX()的示例代码
这篇文章主要介绍了TypeScript中使用getElementXXX()的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09javascript实现类似java中getClass()得到对象类名的方法
这篇文章主要介绍了javascript实现类似java中getClass()得到对象类名的方法,实例分析了javascript实现java中getClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
这篇文章主要介绍了JavaScript设计模式之工厂模式和抽象工厂模式,结合实例形式分析了工厂模式的功能、定义、相关问题解决方法,并分析抽象工厂模式与工厂模式的不同之处,需要的朋友可以参考下2018-07-07
最新评论