Javascript 本网站的滚动功能是如何实现的？

我对扬声器以一定间隔滚动的方式感兴趣

---

我不确定这是否是一个jQuery插件，但我很想知道/理解这个功能是如何实现的。

创建一个容器元素，将其设置为要显示的维度。然后将其

overflow

属性设置为

hidden

，并给它一个更高的孩子。然后使用

setInterval

设置从子对象到父对象的偏移动画：

HTML--

JS--

更新 然后，您可以检测

#child

元素的整个高度显示后，是否应将其动画设置回起始位置：

$(function () {
    var $child   = $('#child'),
        height   = $child.height(),
        interval = 300,
        current  = 0,
        timer    = setInterval(function () {
            current++;
            if ((current * interval) >= height) {
                current = 0;
                $child.stop().animate({ top : 0 }, 1000);
            } else {
                $child.stop().animate({ top : (current * interval * -1) }, 500);
            }
        }, 1500);
});​

---

这里有一个演示：

我不明白……你是什么意思？@elclanrs-我指的是登录页上扬声器的滚动组件。我想知道链接是否已更改，现在不再显示所描述的滚动效果。

#container {
    position : relative;
    width    : 500px;
    height   : 300px;
    overflow : hidden;
}
#child {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 900px;
}

$(function () {
    var $child = $('#child'),
        timer  = setInterval(function () {
            $child.animate({ top : '-=300' }, 500);
        }, 1500);
});

$(function () {
    var $child   = $('#child'),
        height   = $child.height(),
        interval = 300,
        current  = 0,
        timer    = setInterval(function () {
            current++;
            if ((current * interval) >= height) {
                current = 0;
                $child.stop().animate({ top : 0 }, 1000);
            } else {
                $child.stop().animate({ top : (current * interval * -1) }, 500);
            }
        }, 1500);
});​