循环滚动显示

最新推荐文章于 2024-08-07 12:04:23 发布

lee3f

最新推荐文章于 2024-08-07 12:04:23 发布

阅读量958

点赞数

CC 4.0 BY-SA版权

文章标签： function div

本文链接：https://blog.youkuaiyun.com/lee3f/article/details/2060405

本文介绍了一个简单的网页滚动新闻效果的实现方法，通过JavaScript控制div元素的滚动，达到自动更新显示内容的目的。适用于需要循环展示最新消息或公告的场景。

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

<div id=news style=overflow:hidden;height:70;width:400>
<div id=news1>
<a   href=''   target='_blank'>显示1</a><br/>
<a   href=''   target='_blank'>显示2</a><br/>
<a   href=''   target='_blank'>显示3</a><br/>
<a   href=''   target='_blank'>显示4</a><br/>
<a   href=''   target='_blank'>显示5</a><br/>
<a   href=''   target='_blank'>显示6</a><br/>
</div>
<div   id=news2></div>
</div>
<script>
var   speed=30
news2.innerHTML=news1.innerHTML
function   Marquee()
{
if(news2.offsetTop-news.scrollTop<=0)
news.scrollTop-=news1.offsetHeight
else
{
news.scrollTop++
}
}
var   MyMar=setInterval(Marquee,speed)
news.onmouseover=function()   {clearInterval(MyMar)}
news.onmouseout=function()   {MyMar=setInterval(Marquee,speed)}
</script>