JS文字滚动

最新推荐文章于 2024-08-09 14:40:54 发布

SEKIRO_DJ

最新推荐文章于 2024-08-09 14:40:54 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/SEKIRO_DJ/article/details/122484500

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

先获取盒子长度和文字长度，若文字长度超出盒子则进行滚动，滚动到末端清除定时器，重置步长，等待一会再重启定时器

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 200px;
            height: 30px;
            background-color: #f8b500;
            margin: auto;
            overflow: hidden;
        }

        .text {
            position: absolute;
            top: 0;
            left: 0;
            color: #000000;
            padding: 0 10px;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="text">风萧萧兮易水寒壮士一去不复还留得青山在不愁没柴烧</div>
    </div>
    <script>
        let box = document.querySelector('.box'); // 外盒
        let text = document.querySelector('.text'); // 文字
        let boxWidth = box.clientWidth // 盒子长度
        let textWidth = text.clientWidth // 文字长度
        let position = boxWidth - textWidth // 长度之差
        let step = 0
        let timer = null
        function fn() {
            if (step <= position) {
                clearInterval(timer)
                setTimeout(() => {
                    step = 0
                    timer = setInterval(fn, 30)
                }, 1000)
            }
            step -= 1
            text.style.left = step + 'px'
        }
        setTimeout(() => {
            if (position < 0) {
                timer = setInterval(fn, 30)
            }
        }, 1000)
    </script>
</body>

</html>