尝试找出文本滚动效果

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/