【javascript】原生js实现列表间隔滚动

最新推荐文章于 2024-06-24 15:18:02 发布

没有梦想的coder

最新推荐文章于 2024-06-24 15:18:02 发布

阅读量989

点赞数 1

分类专栏： javascript 文章标签：无缝滚动列表间隔滚动

本文链接：https://blog.csdn.net/liyunkun888/article/details/90379388

版权

这篇博客主要介绍如何在不使用jQuery的情况下，利用原生JavaScript实现列表数据的间隔滚动效果，适用于实时显示更新的信息，如区块链信息。通过与后台交互获取数据，然后用自编的JavaScript代码实现无缝滚动功能。

摘要由CSDN通过智能技术生成

今天公司项目遇到一个需求，要求实时间隔滚动显示区块链信息，实时显示需要跟后台协商交互即可搞定。

那么问题就剩下我们拿到数据如何间隔滚动了，用jquery的时候可以直接用插件来搞定。

但是从接触vue之后，我就很少使用jquery写项目了，所以自己用原生coding一个，方便自己以后使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表间隔滚动</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid red;
            overflow: hidden;
        }

        ul {
            width: 100%;