原生js实现循环滚动效果

原生js实现如下图循环滚动效果

请添加图片描述

核心代码

<div class="scroll">
  <div class="blist" id="scrollContainer">
    <div class="bitem">
    </div>
    ......
    <div class="bitem">
    </div>
  </div>
</div>
<script>
setTimeout(() => {
  let speed = 10; // 调整滚动速度,单位是毫秒  
  let scrollContainer = document.getElementById('scrollContainer');
  let contentHeight = scrollContainer.offsetHeight;
  let top = 0
  scrollContainer.style.position = 'relative';
  scrollContainer.style.top = top + 'px';
  scrollContainer.append(scrollContainer.cloneNode(scrollContainer))
  setInterval(() => {
    if (top * -1 < contentHeight) top--
    else top = 0
    scrollContainer.style.top = top + 'px';;
  }, speed);
}, 200)
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/497123.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ES学习日记(一)-------单节点安装启动

基于ES7.4.1编写,其实一开始用的最新的8.1,但是问题太多了!!!!不稳定,降到7.4 下载好的安装包上传到服务器或虚拟机,创建ES目录,命令mkdir -p /路径xxxx 复制安装包到指定路径并解压: tar zxvf elasticsearch-8.1.0-linux-x86_64.tar.gz -C /usr/local/es/ 进入bin目录安装,命…

【操作系统复习之路】操作系统概述(复习的同学有福啦)

长话短说&#xff0c;就记下笔记&#xff0c;期待期末90&#xff0c;随便希望能帮助到有需要的同学。 目录 一、操作系统的目标和作用 二、操作系统的发展过程 2.1 无OS 2.2 有OS 【1】批处理系统 【2】分时系统 【3】实时操作系统 【4】三种基本操作系统的比较&#…

类的定义与实例化

一.类的定义 1.1 格式 定义类的一般格式如下&#xff1a; class 类名{ public:公有成员列表; protected:保护成员列表; private:私有成员列表; }; 构成元素&#xff1a; &#xff08;1&#xff09;类头&#xff08;class head&#xff09; “class 类名”称为类头。 &…

大视频上传断点续传解决方案

版本&#xff1a;6.5.40 代码&#xff1a;up6-jsp-springboot: Web大文件上传-jsp-springboot示例 - Gitee.com nosql示例 nosql示例不需要进行任何配置&#xff0c;可以直接访问测试。 SQL示例 1.创建数据库 2.配置数据库连接 3.自动下载maven依赖 4.启动项目 启动成功 6.访…

开源 | 电动汽车充换电解决方案,从智能硬件到软件系统,全部自主研发

文章目录 一、产品功能部分截图1.手机端&#xff08;小程序、安卓、ios&#xff09;2.PC端 二、小程序体验账号以及PC后台体验账号1.小程序体验账号2.PC后台体验账号关注公众号获取最新资讯 三、产品简介&#xff1f;1. 充电桩云平台&#xff08;含硬件充电桩&#xff09;&…

VTK——自定义二维图像涂抹Widget(支持任意值涂抹),擦除,恢复 vtkCustomPaintWidget

通过鼠标控制 涂抹区域&#xff0c;可以进行&#xff0c;后退&#xff0c;可以进行二维标注&#xff0c;也可以进行回退&#xff0c;也可以任意值涂抹。 vtkCustomPaintWidget 1.标注&#xff1a; 2.擦除 视频&#xff1a; 2D标注 vtkPaint VTK 2D 标注 描绘 2D 擦除&#x…

蓝桥杯-卡片换位

solution 有一个测试点没有空格&#xff0c;要特别处理&#xff0c;否则会有一个测试点运行错误&#xff01; 还有输入数据的规模在变&#xff0c;小心顺手敲错了边界条件 #include<iostream> #include<string> #include<queue> #include<map> #incl…

picgo + 腾讯云 cos 图床搭建

文章目录 0.背景&简介1.注册腾讯云并创建 COS 存储桶2.获取 API 密钥3.安装并配置 PicGo4.配置typora 0.背景&简介 背景: 文档笔记有图片但存储在本地, 想发送给别人需要连同图片目录一起绑定发送比较麻烦 这里使用对象存储 CDN搭建图床 简介: PicGo 是一款开源的图片…

为什么Python不适合写游戏?

知乎上有热门个问题&#xff1a;Python 能写游戏吗&#xff1f;有没有什么开源项目&#xff1f; Python可以开发游戏&#xff0c;但不是好的选择 Python作为脚本语言&#xff0c;一般很少用来开发游戏&#xff0c;但也有不少大型游戏有Python的身影&#xff0c;比如&#xff1…

使用AI创造诗词歌曲

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 在前面的几讲&#xff0c;我们介绍了AI的使用方法&#xff0c;今天我们正式进入实操环节&#xff0c;讲一讲用如何用AI来创作诗歌。 之前我们在讲AI使用的时候&#xff0c;曾经介绍过一种技巧叫做"种子词提示”。…

快速创建zookeeper集群

先说明&#xff0c;zookeeper集群的3个节点都放在同一个虚拟机&#xff08;穷&#xff09;&#xff0c;所以搭建是一个伪集群&#xff0c;因为一个服务器挂机&#xff0c;所有节点都会停止。工作实际情况安装到三个服务器&#xff0c;并修改节点配置的ip地址即可&#xff08;红…

虚拟机-从头配置Ubuntu18.04(包括anaconda,cuda,cudnn,pycharm,ros,vscode)

最好先安装anaconda后cuda和cudnn&#xff0c;因为配置环境的时候可能conda会覆盖cuda的路径&#xff08;不确定这种说法对不对&#xff0c;这里只是给大家的建议&#xff09; 准备工作&#xff1a; 1.Ubuntu18.04&#xff0c;x86_64&#xff0c;amd64 虚拟机下载和虚拟机Ubu…

Discord账号多开如何做?有什么办法可以同时在线?

Discord 是一款免费的语音和文本聊天应用程序。它是一个游戏聊天应用程序和社区&#xff0c;最初是游戏的语音和IM服务&#xff0c;然后转向直播&#xff0c;然后是游戏商店的社区平台。它成为游戏玩家在游戏中交流和协作的首选工具。下面将为你介绍如何同时使用多个discord账号…

XPath攻略:从入门到精通,告别查找困难!

简介 XPath 是一种用于在 XML 文档中检索信息的语言。它通过路径表达式导航 XML 文档&#xff0c;广泛应用于各种场景。XPath 的灵活性和强大功能使其成为在 XML 结构中准确定位和提取数据的重要工具。 XPath 使用场景 Web 自动化测试&#xff1a; XPath 在 Web 自动化测试中…

Linux系统下C++程序运行时的内存布局及存储内容,生命周期,初始化时机。【C++】

Linux系统下C程序运行时的内存布局及存储内容&#xff0c;生命周期&#xff0c;初始化时机详解。 1.程序代码段存储内容生命周期初始化时机特点代码演示 2.初始化数据段 - 只读初始化数据段存储内容生命周期初始化时机特点代码演示 3.初始化数据段 - 读写初始化数据段存储内容生…

aws使用记录

数据传输&#xff08;S3) 安装命令行 安装awscli: https://docs.aws.amazon.com/zh_cn/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions 直到 aws configure list 可以运行 身份验证&#xff1a; 运行&#xff1a; aws config…

35岁的程序员,该何去何从?

2024 年&#xff0c;是充满未知和挑战的一年。AI 的发展日新月异&#xff0c;已经有人用它来写代码了&#xff0c;啥时候会替代程序员&#xff0c;可真不好说。另一方面&#xff0c;程序员扎堆的 IT 互联网行业却进入了平台期甚至下行期&#xff0c;降本增效成为行业主流&#…

SAP_MMQM模块-采购收货质量控制

采购订单收货如何控制质量检验后再放行使用&#xff0c;针对目前了解到的功能&#xff0c;有以下三种方案&#xff1b; 一、启用QM模块&#xff0c;正常使用MIGO收货-移动类型101&#xff0c;入库后产生检验批&#xff0c;产生质检库存&#xff0c;质检部检验合格后&#xff0…

Vue2(十一):脚手架配置代理、github案例、插槽

一、脚手架配置代理 1.回顾常用的ajax发送方式&#xff1a; &#xff08;1&#xff09;xhr 比较麻烦&#xff0c;不常用 &#xff08;2&#xff09;jQuery 核心是封装dom操作&#xff0c;所以也不常用 &#xff08;3&#xff09;axios 优势&#xff1a;体积小、是promis…

Unbtun-arach64架构安装PySide2(python3.6)

aarch平台是无法通过pip安装PySide2的&#xff0c;同时利用源码下载一直报错 1. 我是python3.6.9&#xff0c;在官网上找到对应的PySide2版本 5.15.2.所以首先在官网下载Qt5.15.2的源码&#xff1a;https://download.qt.io/archive/qt/5.15/5.15.2/single/ 2. 编译qt环境 aar…