JS实现网站NOTICE信息上下滚动

最新推荐文章于 2025-06-29 14:58:32 发布

晚风资源组

最新推荐文章于 2025-06-29 14:58:32 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码文章标签：上下滚动

本文链接：https://blog.youkuaiyun.com/qq_34489091/article/details/79772700

常用代码专栏收录该内容

43 篇文章

订阅专栏

本文介绍两种不同的滚动文字效果实现方式，一种是连续滚动的文字显示，另一种则是在滚动到特定位置时暂停的效果。通过HTML和JavaScript代码展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

效果如图：

这个是中间没有间隔的

下面是移动到位置会停一下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>会停顿一下</title>
	<style type="text/css">
    .notice {
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        height: 45px;
    }
    .notice_list {
        width: 100%;
        float: right;
        height: 33px;
        overflow: hidden;    
    }
    .notice_list li{
        list-style-type: none;
        height: 33px;
    }
</style>
</head>
<body>
	<div class="notice">
        <div class="notice_list" id="notice_list_content">
            <ul>
                <li>    
                    第一
                </li>
                <li>    
                    第二
                </li>
                <li>    
                    第三
                </li>
                <li>    
                    第四
                </li>
            </ul>
            
        </div>
    </div>
    <script type="text/javascript">
    var area = document.getElementById('notice_list_content');
    area.innerHTML += area.innerHTML;
    area.scrollTop = 0;
    var timer;
    function startMove(){
        timer = setInterval(scrollUp,50);
        area.scrollTop++;        
    }
    function scrollUp()
    {
        if(area.scrollTop%33 === 0)
        {
            clearInterval(timer);
            setTimeout(startMove,1000);
        }
        else
        {
            area.scrollTop++;
            if(area.scrollTop >= area.scrollHeight/2)
            {
                area.scrollTop = 0;
            }
        }
    }
    setTimeout(startMove,1000);
    </script>
</body>
</html>