notice上下滚动效果

最新推荐文章于 2024-06-13 16:07:48 发布

祝余、

最新推荐文章于 2024-06-13 16:07:48 发布

阅读量627

点赞数

分类专栏： html js

原文链接：https://blog.csdn.net/qq_34489091/article/details/79772700

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <title>NOTICE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div style="height:30px;overflow:hidden;">
            <div id='marquee'>
                <p>第1段</p>
                <p>第2段</p>
                <p>第3段</p>
                <p>第4段</p>
                <p>第5段</p>
            </div>
        </div>
        <script>
            (function(){
                var marquee = document.getElementById('marquee');
                var offset=0;
                var scrollheight =marquee.offsetHeight;
                var firstNode = marquee.children[0].cloneNode(true);
                marquee.appendChild(firstNode);
                setInterval(function(){
                    if(offset == scrollheight){
                        offset = 0;
                    }
                    marquee.style.marginTop = "-"+offset+"px";
                    offset += 1;
                },50);
            })();
        </script>
    </body>
</html>

祝余、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
notice上下滚动效果

<html> <head> <title>NOTICE</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> &lt...
复制链接

扫一扫

专栏目录