原生js实现文字无缝滚动，速度可自行定义

最新推荐文章于 2024-08-09 14:40:54 发布

h_maggie

最新推荐文章于 2024-08-09 14:40:54 发布

阅读量9.1k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/h_maggie/article/details/80798423

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端时间工作中遇到一个文字无缝滚动的需求，于是自己研究了很久，写了一个小的demo，可以直接拿走用。

适用场景很广泛，如有需求，可来这里拿代码。

一、html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字无缝滚动</title>
	<style>
		*{
			margin: 0;
			padding: 0
		}
		#wrapper{
			overflow:hidden;
			height:30px;
			width:500px;
			background:#ccc;
			color:#006600;
			margin: 100px auto;
			text-align: center;
		}
	</style>
</head>
<body>
	    <div id="wrapper">  
		<div id="demo1">  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
			<p>恭喜 手机号为176****5610 的用户喜获 100元 现金券</p>  
		</div>  
		<div id="demo2">
		</div>  
	</div>
</body>
</html>

二、js代码如下：

<script>  
	var speed = 80;  // 可自行设置文字滚动的速度
	
	var wrapper = document.getElementById('wrapper');
	var demo1 = document.getElementById('demo1');
	var demo2 = document.getElementById('demo2');

	demo2.innerHTML=demo1.innerHTML   //克隆demo1为demo2  
	function Marquee(){  
		if(demo2.offsetHeight-wrapper.scrollTop<=0)  //当滚动至demo1与demo2交界时  
			wrapper.scrollTop-=demo1.offsetHeight    //demo跳到最顶端  
		else{  
			wrapper.scrollTop++   //如果是横向的 将 所有的 height top 改成 width left  
		}  
	}  
	
	var MyMar=setInterval(Marquee,speed)  //设置定时器  
	wrapper.οnmοuseοver=function() {clearInterval(MyMar)}   //鼠标移上时清除定时器达到滚动停止的目的  
	wrapper.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}  //鼠标移开时重设定时器  
</script>

三、如果大家有什么意见或建议，可直接联系我修改。