js如何实现文字向上滚动效果？

最新推荐文章于 2024-06-06 00:30:00 发布

f8下一步

最新推荐文章于 2024-06-06 00:30:00 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/weixin_44712870/article/details/118769888

版权

可以使用定时器来实现，定时任务是将显示区域的scrollTop属性+1。
直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现文字向上滚动效果</title>
</head>
<body>
<div id="showArea" style="width: 150px;height: 50px;border: thick dashed #ddd;overflow: hidden">
    <ul style="list-style-type: none"><!--隐藏列表项前面的小黑点-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
    </ul>
    <ul>
        <li>床前明月光</li>
        <li>疑是地上霜</li>
        <li>举头望明月</li>
        <li>低头思故乡</li>
    </ul>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    //定时器任务
    var handler = function(){
        //向上移动1px
        $('#showArea').scrollTop($('#showArea').scrollTop() + 1);
    };
    //时间间隔
    var interval = 50;
    //启动定时器
    setInterval(handler, interval);
</script>
</body>
</html>

为了让文字在刚开始的时候不要出现在显示区域，所以在前面加了两个空白标签。

但是滚动到底的时候就停下了，scrollTop没法继续增加了；如何让它循环滚动呢？
可以加一个判断，如果列表滚动到底了，就在后面追加一组同样的列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现文字向上滚动效果</title>
</head>
<body>
<div id="showArea" style="width: 150px;height: 50px;border: thick dashed #ddd;overflow: hidden">
    <ul style="list-style-type: none"><!--隐藏列表项前面的小黑点-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
    </ul>
    <ul>
        <li>床前明月光</li>
        <li>疑是地上霜</li>
        <li>举头望明月</li>
        <li>低头思故乡</li>
    </ul>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    //准备正文的副本
    var ulCopy = $('ul')[1].outerHTML;
    //定时器任务
    var handler = function(){
        //向上移动1px
        $('#showArea').scrollTop($('#showArea').scrollTop() + 1);
        //如果滚动到了底部，则将副本追加在后面
        if (Math.ceil($('#showArea').height()+$('#showArea').scrollTop())==$('#showArea')[0].scrollHeight) {
            $('#showArea').append(ulCopy);
        }
        //为了避免ul越来越多，当最上面的ul离开显示区域时就将其清除
        if ($('#showArea').scrollTop() > $($('ul')[0]).outerHeight(true)) {
            $($('ul')[0]).remove();
        }
    };
    //时间间隔
    var interval = 50;
    //启动定时器
    setInterval(handler, interval);
</script>
</body>
</html>

为了避免ul越来越多，当最上面的ul离开显示区域时就将其清除。

如果元素只有一行，占不满显示区域，这时又只有元素离开显示区域时才会追加，就会导致不连续。所以，可以在最开始添加一个判断，如果元素的高度小于显示区域的高度，就一直追加到超过显示区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现文字向上滚动效果</title>
</head>
<body>
<div id="showArea" style="width: 150px;height: 100px;border: thick dashed #ddd;overflow: hidden">
    <ul style="list-style-type: none"><!--隐藏列表项前面的小黑点-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
    </ul>
    <ul>
        <li>床前明月光</li>
    </ul>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    //准备正文的副本
    var ulCopy = $('ul')[1].outerHTML;
    //如果内容的高度小于显示区域的高度，则一直追加到超过显示区域的高度
    var num = 1;
    while (true) {
        if ($($('ul')[1]).outerHeight(true) * num < $('#showArea').height()) {
            $('#showArea').append(ulCopy);
            num++;
        } else {
            break;
        }
    }
    //定时器任务
    var handler = function () {
        //向上移动1px
        $('#showArea').scrollTop($('#showArea').scrollTop() + 1);
        //如果滚动到了底部，则将副本追加在后面
        if (Math.ceil($('#showArea').height() + $('#showArea').scrollTop()) == $('#showArea')[0].scrollHeight) {
            $('#showArea').append(ulCopy);
        }
        //为了避免ul越来越多，当最上面的ul离开显示区域时就将其清除
        if ($('#showArea').scrollTop() > $($('ul')[0]).outerHeight(true)) {
            $($('ul')[0]).remove();
        }
    };
    //时间间隔
    var interval = 50;
    //启动定时器
    setInterval(handler, interval);
</script>
</body>
</html>

如果想要实现鼠标移入时停止滚动、移出时继续滚动的效果，就绑定相关事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现文字向上滚动效果</title>
</head>
<body>
<div id="showArea" style="width: 150px;height: 100px;border: thick dashed #ddd;overflow: hidden">
    <ul style="list-style-type: none"><!--隐藏列表项前面的小黑点-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
        <li style="white-space: pre"> </li><!--占位-->
    </ul>
    <ul>
        <li>床前明月光</li>
    </ul>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
    //准备正文的副本
    var ulCopy = $('ul')[1].outerHTML;
    //如果内容的高度小于显示区域的高度，则一直追加到超过显示区域的高度
    var num = 1;
    while (true) {
        if ($($('ul')[1]).outerHeight(true) * num < $('#showArea').height()) {
            $('#showArea').append(ulCopy);
            num++;
        } else {
            break;
        }
    }
    //定时器任务
    var handler = function () {
        //向上移动1px
        $('#showArea').scrollTop($('#showArea').scrollTop() + 1);
        //如果滚动到了底部，则将副本追加在后面
        if (Math.ceil($('#showArea').height() + $('#showArea').scrollTop()) == $('#showArea')[0].scrollHeight) {
            $('#showArea').append(ulCopy);
        }
        //为了避免ul越来越多，当最上面的ul离开显示区域时就将其清除
        if ($('#showArea').scrollTop() > $($('ul')[0]).outerHeight(true)) {
            $($('ul')[0]).remove();
        }
    };
    //时间间隔
    var interval = 50;
    //启动定时器
    var timer = setInterval(handler, interval);
    //鼠标移入，停止滚动；鼠标移出，继续滚动
    $('#showArea').off('mouseover').on('mouseover', function () {
        clearInterval(timer);
    });
    $('#showArea').off('mouseout').on('mouseout', function () {
        timer = setInterval(handler, interval);
    })
</script>
</body>
</html>

参考：
https://blog.csdn.net/liona_koukou/article/details/52641491

f8下一步

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js如何实现文字向上滚动效果？

可以使用定时器来实现，定时任务是将显示区域的scrollTop属性+1。直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现文字向上滚动效果</title></head><body><div id="showArea" style="width: 150px;height: 50
复制链接

扫一扫