文字纵向滚动

最新推荐文章于 2022-07-23 20:53:34 发布

佥易爸爸

最新推荐文章于 2022-07-23 20:53:34 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/avinegar/article/details/21025341

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML实现的滚动文字效果。通过设置定时器和滚动条的位置，可以使div中的文字向上滚动显示，同时鼠标悬停时停止滚动，移开后继续滚动。此效果适用于网站导航栏或公告栏等场景。

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

<div style="width:243px;float:left;margin-top:30px;">
<div id="demo" style="overflow:hidden;height:80px;width:90%; font-size: 12px;align:right;color: #c50800;line-height:22px;">
                    <div id="demo1">	 							
					<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>
                    </div>
					<div id="demo2"></div>
                    </div>
                    </div>
					<script>
						 var speed = 50
						 var _demo = document.getElementById("demo");
						 var _demo1 = document.getElementById("demo1");
						 var _demo2 = document.getElementById("demo2");
						 demo2.innerHTML=demo1.innerHTML
						 function Marquee(){
						  if(_demo2.offsetHeight-_demo.scrollTop<=0){
						   _demo.scrollTop-=_demo1.offsetHeight;
						  }else{
						   _demo.scrollTop++;
						  }
						 }
						 var MyMar=setInterval(Marquee,speed)
						 _demo.onmouseover=function() {clearInterval(MyMar)}
						 _demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
					</script>