js实现文本向上滚动

最新推荐文章于 2023-09-27 10:50:07 发布

喝碗茶冷静一下

最新推荐文章于 2023-09-27 10:50:07 发布

阅读量455

点赞数 1

文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_22669967/article/details/103278326

版权

js实现文本向上滚动

话不多说，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="background-color: #FFFFFF;overflow:hidden;">
		<div style="width: 18.75rem;height: 25rem;background-color: lightsteelblue;padding: 100px 50px;">
			<div style="width: 18.75rem;height: 25rem;overflow:hidden;background-color:rgb(255,255,255,0.3);" id="demo"> 
			</div>
		</div>
		<script type="text/javascript">
			var obj = document.getElementById("demo");
			var obj1 = document.createElement("div");
			
			//获取文本
			var words = "sweet dreams are made of this,who am I to disagree,travel the world and seven seas,everybody is looking for something,"+
						"some of them want to use you,some of them want to used by you,some of them want to abuse you,some of them want to be abused,"+
						"I wanna use you and abuse you,I gonna kown what's inside";
			words = words.split(",");
			var start = document.createElement("div");
			var div = document.createElement("div");				
			var end = document.createElement("div");
			
			start.style.height = "25rem";
			start.style.width = "18.75rem";
			obj1.appendChild(start);
			
			for(var i in words){
				var smalldiv = document.createElement("div");
				smalldiv.style.textAlign="center";
				smalldiv.style.color="white";
				smalldiv.style.fontSize="15px";
				smalldiv.innerText = words[i];
				div.appendChild(smalldiv);
			}
			obj1.appendChild(div);
				
			end.style.height = "25rem";
			end.style.width = "18.75rem";
			end.innerText="The End";
			end.style.padding="0px";
			end.style.textAlign="center";
			end.style.display="table-cell";
			end.style.verticalAlign="middle";
			end.style.color="white";
			end.style.fontSize="20px";
			obj1.appendChild(end);
			
			obj.appendChild(obj1);
			
			function Marquee(){
				obj.scrollTop ++;
				
				if(obj.scrollTop%(obj1.offsetHeight-obj.offsetHeight) == 0){
					clearInterval(timer);
					setTimeout(()=>{
						obj.scrollTop=0;
						timer = setInterval(Marquee,50)
					},50);
				}
			}
			var timer = setInterval(Marquee,50);
		</script>
	</body>
	
</html>

实现界面