这个网站的滚动功能是如何实现的

How is the scrolling functionality done in this website?

本文关键字：何实现 实现 网站 滚动 功能      更新时间：2023-09-26

我对这个网站让扬声器以一定的间隔滚动的方式很感兴趣。

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

创建一个容器元素，该元素设置为要显示的维度。然后将其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/

相关文章：