Question

我想知道是否有人可以协助此网站让扬声器以特定间隔滚动的方式。

不确定这是否是一个jQuery插件，但是很想知道/了解这个功能是如何完成的。

请参阅产品：＆gt; Webstock 2012

感谢。

Answer 1

创建一个设置为要显示的尺寸的容器元素。然后将它的overflow属性设置为hidden并给它一个更高的孩子。然后使用setInterval设置从子项到父项的偏移量的动画：

HTML -

<div id="container">
    <div id="child"></div>
</div>

CSS -

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

JS -

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

更新

然后，您可以检测#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);
});

以下是演示：http://jsfiddle.net/BH5gK/2/

这个滚动功能如何完成

1 个答案:

更新