margin-left 安排文字跑马灯

原创已于 2022-10-20 09:26:51 修改 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS

于 2018-07-25 16:32:58 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用CSS的margin-left属性来实现跑马灯滚动效果的方法，并提供了完整的HTML和JavaScript代码示例。

小编我看网上做跑马灯的大多数用标签的scrollleft的属性，其实margin-left也可以的。

话不多说，上代码：

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

	<script>
		function move(){
	var sl=parseFloat(document.getElementById('span2').style.marginLeft);//这个函数的作用为的是得到字符串前面的数值
			
	var sw=document.getElementById('span2').scrollWidth;//得到标签的长度
			if(-sl>=sw){
				sl=450;//文字从右边进入，因为第一个审判的长度是450px;
			}else{
				sl=sl-1;
			}
			document.getElementById('span2').style.marginLeft=sl+"px";
			setTimeout('move()',20);//循环执行这个函数
			
			
			
		}
	
	</script>
	</head>

<body onLoad="move()">
<span id="span1" style="display: block;width: 450px;height: 20px;overflow: hidden;white-space: nowrap;margin: auto;background:grey; "><span  id="span2" style="color: gold;margin-left:450px;">曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。如果非要在这份爱上加上一个期限，我希望是…… 一万年</span>
	</span>

</body>

</html>

大家有什么更好的想法，欢迎一起讨论！