js实现文字滚动效果

进击中的大学生

于 2024-01-24 12:41:26 发布

阅读量609

点赞数 8

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/2301_76760417/article/details/135819218

版权

本文介绍了一个使用HTML、CSS和JavaScript实现的文字滚动效果小案例，展示了如何通过定时器和DOM操作动态加载列表内容，使文字逐行滚动。

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

这是一个比较简单的小案例，就是文字上下滚动出来。下面就是源代码，希望大佬指正！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字滚动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .scrool-text {
            width: 450px;
            padding: 15px;
            margin: 20px;
            background-color: #e3fdfd;
            border-radius: 8px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .scrool-text .title {
            height: 20px;
            padding-right: 10px;
            border-right: 2px solid #ccc;
        }

        .scrool-text .content ul {
            overflow: hidden;
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="scrool-text">
        <div class="title">最新公告</div>
        <div class="content">
            <ul class="list">
                <li>1. Lorem ipsum dolor sit amet.</li>
                <li>2. Amet hic ipsum offices vitae!</li>
                <li>3. Debits quart qua sapient venial.</li>
                <li>4. Ilium nobs object oddity sapient?</li>
                <li>5. Et laudanum nemo official omnibus.</li>
            </ul>
        </div>
    </div>
</body>
<script>
    //首先要确保中间有缓冲的时间，因此需要复制第一个li到最后一个
    let list = document.querySelector('.list')
    // function copy() {
    //     // 复制第一个li到最后一个
    //     let newItem = list.children[0].cloneNode(true)
    //     list.appendChild(newItem)
    // }
    // copy()
    let duration = 1500 // 滚动持续时间
    const itemHeight = 50 // 每个li的高度
    let currendIndex = 0 //目前展示的是第几位元素
    function moveNext() {
        currendIndex++
        if (currendIndex == list.children.length) {
            currendIndex = 0
        }
        list.scrollTop({
            top: currendIndex * itemHeight,
            behavior: 'smooth'
        })
    }
    setInterval(moveNext, duration)
</script>

</html>