在网页上循环移动文本

Question

在网页上循环移动文本

javascripthtmlcssflash

7

我正在设计一个网页，在这个页面上，我需要将文本从屏幕的左侧移动到右侧。我已经尝试过使用标签，没有出现任何错误。

我的要求是，当文本即将在网页的右侧消失时，它应该从页面的左侧开始出现。它不应该等待所有的文本消失，然后再从左边开始。

到目前为止，我仅使用了标签来完成这个效果，请建议其他方法。

- Prathamesh

@投票认为此问题应关闭的人，请解释一下为什么您认为这不是一个真正的问题，以便OP可以改进它。 - Ash Burlaczenko

不知道是谁关闭了它，但<marquee>是一个非标准标签。它已被W3C弃用，并且他们不建议在任何HTML文档中使用它。 - Andy

2

可能是Javascript Marquee to replace <marquee> tags的重复问题。 - Alohci

我认为人们来到这个网站是因为他们没有正确的答案，而不是进行个人攻击。只是说，在问题中有一个非标准标签并不足以导致关闭问题。 - VoronoiPotato

这也可能通过CSS3变换实现。 - John Dvorak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Dvorak · Accepted Answer

这是可能通过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)
})()

当文本在右侧消失时，它应该从右侧开始出现。修改相对宽度以实现不同的效果。