1

我正在我的网站上进行“旅行”操作。如果一个人，当他来到网站时 3 秒内没有做任何事情，那么旅程开始：

var stop_timeout = false; // function for page trip
        $(function() {
            $("#begin").mousemove(function() {
                clearTimeout(stop_timeout);
                stop_timeout = setTimeout(function() {
                    //alert("The mouse has stopped.");
                    scroll("#about");
                }, 3000);            
            });
        });

我想做的是，当他没有在“关于”部分移动鼠标时，该人应该被放到下一个部分。我想象这样的事情：

等待 - 滚动到 #about - 等待 - 滚动到 #services - 等待 - 滚动到 #contact

我该怎么做？

4

1 回答 1

2

我试图在这个小提琴中解决它：http: //jsfiddle.net/LePhil/zgwn9/

travel() 递归调用自己，我相信你可以用不同的方式解决它，但这种方式对我来说是最明显的。对于 jQuery 选择器，您还可以使用 .next() 找到解决方案，我想说，但为了更清楚，我使用了一个数组。希望这可以帮助！

var timer,
elementsToScrollTo = ["#second", "#third", "#fourth"],
breaker = false;

$(document).on("click, mousemove", function() {
    stop();
});
$(document).ready(function() {
    travel(0);
});


function travel(i) {
    timer = setTimeout( function () {
        if ( breaker ) { return; }
        $('html, body').animate({
            scrollTop: $( elementsToScrollTo[i] ).offset().top
        }, 1000, function() {
            if ( i+1 >= elementsToScrollTo.length ) {
                stop();
            } else {
                travel(i+1);
            }
        });
    }, 1000);
}
function stop() {
    console.log("stopping");
    breaker = true;
    clearTimeout(timer);
}
于 2013-08-09T20:29:30.503 回答