margin-left 安排 文字跑马灯

论坛 期权论坛 脚本     
匿名技术用户   2020-12-30 07:49   11   0

小编我看网上做跑马灯的大多数用标签的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>

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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP