原生js—信息滚动显示效果

最新推荐文章于 2024-09-11 11:07:15 发布

你好瘦

最新推荐文章于 2024-09-11 11:07:15 发布

阅读量1k

点赞数

分类专栏：常见功能实现

本文链接：https://blog.csdn.net/weixin_40002964/article/details/88105237

版权

常见功能实现专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;font-style:normal;list-style: none;text-decoration: none;color:#666;font-size:14px;line-height: 24px;}
    #box{margin: 0 auto;width:150px;height:100px;overflow: hidden;}
    #box li{height:24px;line-height: 24px;}
    </style>
</head>
<body>
    <div id="box">
        <ul id="con1">
            <li><a href="#">1、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">2、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">3、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">4、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">5、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">6、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">7、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">8、喧豗阿达阿萨德啊</a></li>
            <li><a href="#">9、喧豗阿达阿萨德啊</a></li>            
        </ul>
        <!-- <ul id="con2"></ul> -->
    </div>

    <script>
    var area = document.getElementById('box');
    var liHeight = area.getElementsByTagName('li')[0].offsetHeight;
    area.innerHTML += area.innerHTML;
    area.scrollTop = 0;
    var time;
    var speed = 50;
    var delay = 2000;

    function startMove() {
        area.scrollTop++;
        time = setInterval(scrollUp, 50);
    }

    function scrollUp() {
        if (area.scrollTop % liHeight === 0) {
            clearInterval(time);
            setTimeout(startMove, 100);
        } else {
            area.scrollTop++;
        }
        if (area.scrollTop >= area.scrollHeight / 2) {
            area.scrollTop = 0;
        }
    }

    setTimeout(startMove, 2000)
    </script>
</body>
</html>