js写文字滚动上下滚动

猴猴不是猴

于 2024-08-09 14:39:44 发布

阅读量739

点赞数 3

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_56381842/article/details/141061671

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上下滚动文字</title>
<style>
    .scroll-container {
        height: 20px; /* 设置滚动区域的高度 */
        overflow: hidden; /* 隐藏溢出内容 */
        position: relative;
    }

    .scroll-content {
        position: absolute;
        top: 0;
        animation: scroll 20s linear infinite; /* 设置滚动动画 */
    }

    @keyframes scroll {
        from {
            transform: translateY(0%);
        }
        to {
            transform: translateY(-100%); /* 负值等于滚动区域高度 */
        }
    }
</style>
</head>
<body>

<div class="scroll-container" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
    <div class="scroll-content">
        <p>这里是要滚动的文字内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <p>这是第二行内容。</p>
        <!-- 添加更多内容 -->
    </div>
</div>

<script>
    // 获取滚动内容的高度
    const scrollContent = document.querySelector('.scroll-content');
    const scrollContentHeight = scrollContent.clientHeight;

    // // 设置滚动容器的高度为滚动内容的高度的两倍，确保内容滚动完后仍然有内容可见
    // const scrollContainer = document.querySelector('.scroll-container');
    // scrollContainer.style.height = `${scrollContentHeight * 2}px`;

    // 当动画完成时，重新开始滚动
    scrollContent.addEventListener('animationiteration', () => {
        scrollContent.style.transform = 'translateY(0%)';
    });

    // 暂停滚动
    function pauseScroll() {
        scrollContent.style.animationPlayState = 'paused';
    }

    // 恢复滚动
    function resumeScroll() {
        scrollContent.style.animationPlayState = 'running';
    }
</script>

</body>
</html>