JS JavaScript 实现文字上下滚动效果

最新推荐文章于 2024-05-13 01:07:15 发布

短暂又灿烂的

最新推荐文章于 2024-05-13 01:07:15 发布

阅读量943

点赞数

分类专栏：前端文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_42232156/article/details/120827684

版权

前端专栏收录该内容

266 篇文章 11 订阅

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的滚动轮播效果示例。代码中定义了一个名为'dMarquee'的函数，该函数用于设置滚动速度、停止时间和事件监听，当鼠标悬停时停止滚动，离开时继续滚动。内容包括多行文本，当滚动到底部时会回到顶部。此代码适用于创建动态展示信息的网页元素。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播 滚动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #scroll {
            margin: 0;
            padding: 2px 0;
            list-style: none;
            width: 300px;
            height: 200px;
            overflow: hidden;
            border: 1px #e5e5e5 solid;
            font-size: 16px;
            color: #f0f0f0;
            background-image: url("../images/p.png");
        }
 
        #scroll li {
            margin: 0;
            padding: 0 4px;
            font-size: 12px;
            height: 18px;
            line-height: 18px;
            width: 600px;
        }
    </style>
    <script>
        window.onload = function () {
            function dMarquee(id) {
                let speed = 20; //速度
                let stop = 1000; //停止时间
 
                let ul = document.getElementById(id);//获取ul元素
                let rows = ul.getElementsByTagName('li').length;//获取li个数
                let height = ul.getElementsByTagName('li')[0].offsetHeight;//取得第一个li的高度
                ul.innerHTML += ul.innerHTML;//获取所有li
                let timeID = false;//setTime的时间标示
                let play = function () { //移动方法
                    ul.scrollTop++;//移动滚动条
                    //移动到底的时候恢复为零
                    if (ul.scrollTop === rows * height) {
                        ul.scrollTop = 0;
                    }
                    //每次滚动
                    if (ul.scrollTop % height === 0) {
                        timeID = setTimeout(play, stop);
                    } else {
                        timeID = setTimeout(play, speed);
                    }
                }
                timeID = setTimeout(play, stop);
                ul.onmouseover = function () {
                    clearTimeout(timeID);
                }
                ul.onmouseout = play;
            }
 
            dMarquee('scroll')
        }
    </script>
</head>
<body>
<ul id="scroll">
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Amet hic ipsum offices vitae!</li>
    <li>Debits quart qua sapient venial.</li>
    <li>Ilium nobs object oddity sapient?</li>
    <li>Et laudanum nemo official omnibus.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Dolore hic magnam nemo quasi.</li>
    <li>Expedita nemo non optio performed?</li>
    <li>Asperities culpa impedit in quos.</li>
    <li>Cumque illum performed similique volutes.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Eveniet optio, vitae. Fuga, illum.</li>
    <li>Diagnosis fugiat laborum officiis quibusdam?</li>
    <li>Cumque neque qua tempora volutes?</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Consecrated incidunt quo rem voluptatem.</li>
    <li>Culpa distinctio natus pariatur velit.</li>
    <li>Dolores neque similique sint ut!</li>
    <li>Accuses esse itaque nihil rescinds.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Fugit iure nesciunt placeat poor.</li>
    <li>Aperiam atque cupidity numquam rescinds!</li>
    <li>Illum molest officia sed veniam!</li>
    <li>Enum fugiat in labore optio?</li>
</ul>
</body>
</html>