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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 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和MySql中计算时间差的方法详解
2015/03/27 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
js传值 判断
2006/10/26 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
python fabric使用笔记
2015/05/09 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python数组并集交集补集代码实例
2020/02/18 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
2015公务员年度考核评语
2015/03/25 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
特种设备安全管理制度
2015/08/06 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
JAVA springCloud项目搭建流程
2022/05/11 Java/Android