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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
详解用node编写自己的cli工具
May 23 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
python调用c++传递数组的实例
2019/02/13 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python 绘制国旗的示例
2020/09/27 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
网站开发实习生的自我评价
2013/12/11 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
收银员岗位职责
2015/02/03 职场文书
行政处罚听证告知书
2015/07/01 职场文书
生活小常识广播稿
2015/08/19 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server