JS实现单张或多张图片持续无缝滚动的示例代码


Posted in Javascript onMay 10, 2020

背景:

想要实现图片持续滚动,既然使用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 图片 无缝滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
详解javascript中的Error对象
Apr 25 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 #Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 #Javascript
JavaScript 装逼指南(js另类写法)
May 10 #Javascript
js中!和!!的区别与用法
May 09 #Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 #Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 #Javascript
js根据后缀判断文件文件类型的代码
May 09 #Javascript
You might like
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
vue中添加mp3音频文件的方法
2018/03/02 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python代码需要缩进吗
2020/07/01 Python
自荐信的两点禁忌
2013/10/30 职场文书
公司董事长职责
2013/12/12 职场文书
简历的自荐信
2013/12/19 职场文书
新年爱情寄语
2014/04/08 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
单位授权委托书范本
2014/09/26 职场文书
员工离职感谢信
2015/01/22 职场文书
小浪底导游词
2015/02/12 职场文书
大学生实习推荐信
2015/03/27 职场文书
小学德育工作总结2015
2015/05/12 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers