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入门学习资料收集整理篇
Jul 06 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
ES6对象操作实例详解
May 23 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php微信开发之上传临时素材
2016/06/24 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
搞定immutable.js详细说明
2016/05/02 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue配置请求本地json数据的方法
2018/04/11 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js实现列表按字母排序
2020/08/11 Javascript
pyside写ui界面入门示例
2014/01/22 Python
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python 闭包的使用方法
2017/09/07 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Django 自定义分页器的实现代码
2019/11/24 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
党员领导干部承诺书
2014/05/28 职场文书
2015年派出所工作总结
2015/04/24 职场文书
小学教育见习总结
2015/06/23 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
Python加密技术之RSA加密解密的实现
2022/04/08 Python