javascript - 在网页上循环移动文本

Question

<分区>

Answer 1

可以使用 Javascript:

滚动文本的两个副本由容器的宽度分开。从(左副本可见)到(右副本可见)制作动画，然后跳回并重复。

类似于(未经测试，使用 jQuery):

<div class="outer">
  <div class="inner">
     some text
  </div>
</div>

CSS:

.outer, .inner {
  width: 100%;
}
.outer {
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
}

js:

(function rerun(){
  var time = 10000 //ms

  $(".inner").slice(0,-1).remove()
  $i1=$(".inner")
  $i2=$i1.clone()

  $i1.css({left:0}).animate({left:"-100%"}, time)
  $i2.insertAfter($i1).css({left:"100%"}).animate({left:0}, time, rerun)
})()

这样一来，文本在右侧开始消失后，就会立即出现在右侧。修改相对宽度以获得不同的效果。