试图找出一个文本滚动效果

Question

我喜欢我在网站上看到过的效果，并且我一直在通过他们的javascript和CSS进行筛选，看看它是如何完成的。然而，该网站是韩国的，并使其更难，我不太精通javascript开始。

该网站是： http://search.naver.com/search.naver?where=nexearch&query=idolfix&sm=top_hty&fbm=1&ie=utf8

有没有人在页面的右上角看到效果，页面每隔几秒就会更新10个链接 - 特别是文本滚动到位的方式？

Answer 1

他们有一个包含overflow: hidden的包装div。

然后在那个div中，他们有2个div，其中包含当前值和下一个值。

<div class="wrap">
    <div class="current">
        foo
    </div>
    <div class="next">
        bar
    </div>
</div>

效果完成后，您只需将.next设为.current，然后使用AJAX添加新的.next值。

首先，.next div .wrapper（实际上在下面），然后将它向上移动。

使用jQuery同时移动两个div可以很容易地完成效果。

$('.current').animate({
    'top': '-1em'
});
$('.next').animate({
    'top': 0
});

以下是一个实例：http://jsfiddle.net/tusbar/GFZTE/