小编我看网上做跑马灯的大多数用标签的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>
大家有什么更好的想法,欢迎一起讨论!