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 相关文章推荐
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
js微信分享接口调用详解
Jul 23 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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数据库处理封装类实例
2016/12/24 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python中的id()函数指的什么
2017/10/17 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python是什么 Python的用处
2020/05/26 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
车间班组长竞聘书
2015/09/15 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL