1

此功能的工作方式：

1)用户点击ID为“surf”的按钮，动画开始

2)函数找到第一个具有“threadboard”类的 div 实例，在那里暂停 1.5 秒，然后平滑向下滚动到具有“threadboard”类的 div 的下一个实例，在那里暂停 1.5 秒，然后平滑滚动到接下来，以此类推

3)该函数应该通过所有具有“线程板”类的 div 实例来执行此操作，然后结束

我正在尝试将 jQuery 与方法, 和scrollTop()到目前为止each()混合使用成功。这是我到目前为止所拥有的（编辑：包括工作但不完美的代码）：animate()setTimeout()

var currentIndex = 0;
var numDivs = 18;

$(window).load(function() {
    $('#surf').click(
        function(){start();}
    );
});

function start() {
//if (numDivs > 0) {
    var winY = window.screenY;
            $("body").animate({ scrollTop: 225 * currentIndex}, 1100);
    //
    currentIndex = (currentIndex + 1) % numDivs;
    setTimeout(start, 3000);
//}
}

现在我意识到我通过估计每个实例相距一定数量的像素来使用盗版方法，并且在实例数量中进行了硬编码，这并不理想。编写此函数的最佳方法是什么？代码将在http://cornellhub.com/board/上实现

4

1 回答 1

1

这是我的镜头：

http://jsfiddle.net/3aBx9/

基本上，我检查每个存在的顶部位置.threadboard，遍历每一个，向计时器添加一个值并让它运行。

创建取消按钮应该像clearTimeout().

由原始海报最终编辑，修改后的代码适用于所有浏览器。最终的解决方案是使用orbody, html代替bodyor html，前者适用于 webkit 浏览器，后者适用于非 webkit 浏览器。函数和超时也必须移出$(document).ready(function () {. 下面的代码现在反映了编辑后的解决方案：

var timeOut = 1500;

function startSurf(winY) {
//new timeout function
setTimeout(function () {
    //the page neesd to be animated (relative of course, careful)
    $('body').animate({

        //animate the scroll
        scrollTop: winY

        //scroll speed
    }, 'fast');

    //our timer needs to be declared outside the functin so it doesn't just jump to the end.
}, timeOut);

//add 1.5 seconds for each iteration loop or it will try to jump to the end.
timeOut += 1500;
}
$(document).ready(function () {
$('#surf').click(function () {
    var numThreads = $('.threadboard');

    $.each(numThreads, function (index, obj) {
        //the position of the object
        var position = $(obj).position();

        //the top position of the object (relative of course, careful)
        var winY = position.top;

        //on the first iteration
        if (index == 0) {
            $('body').animate({
                scrollTop: winY
            }, 'fast');

            //for every iteration after
        } else {
            startSurf(winY);
        }
    });
});
});
于 2012-05-22T02:03:10.223 回答