H5页面消息滚动条

最新推荐文章于 2024-05-10 18:22:52 发布

m15712884682

最新推荐文章于 2024-05-10 18:22:52 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5 javascript 文章标签： html5 javascript web

本文链接：https://blog.csdn.net/m15712884682/article/details/111560062

Html5 同时被 2 个专栏收录

6 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

这是一个使用HTML5和JavaScript实现的网页滚动消息条示例。通过定义数组`marqueeContent`存储消息链接，利用JavaScript创建并控制滚动效果，鼠标悬停时停止滚动，离开时恢复。代码中设置了一个滚动容器`marqueeBox`，通过改变其滚动位置实现消息的滚动显示。

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

<body>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>";
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
function initMarquee() {
    var str=marqueeContent[0];
    document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
    marqueeId++;
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
    var str=marqueeContent[marqueeId];
    marqueeId++;
    if(marqueeId>=marqueeContent.length) marqueeId=0;
    if(document.getElementById("marqueeBox").childNodes.length==1) {
    var nextLine=document.createElement('DIV');
    nextLine.innerHTML=str;
    document.getElementById("marqueeBox").appendChild(nextLine);
    }
    else {
        document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
        document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
        document.getElementById("marqueeBox").scrollTop=0;
    }
    clearInterval(marqueeInterval[1]);
    marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
    document.getElementById("marqueeBox").scrollTop++;
    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
    clearInterval(marqueeInterval[1]);
    }
}
initMarquee();
</script>
</body>
</html>

H5页面 消息滚动条

H5页面消息滚动条