滚动鼠标悬停,点击查看速度

Question

当你将鼠标悬停在div上时,我试图让我的页面滚动.这是我到目前为止所得到的

$(document).ready(function() {
    $("#hoverscroll").mouseover(function() {
        var div = $('body');
        setInterval(function(){
            var pos = div.scrollTop();
            div.scrollTop(pos + 1);
        }, 100)  
    });
});

http://jsfiddle.net/3yJVF/

但是,还有两件事要做.我需要它在每次单击时提高速度,在不再悬停时停止并将速度重置为默认值.

我正在努力实现这样的目标:

$(document).ready(function() {
    $("#hoverscroll").mouseover(function() {
        var div = $('body');

        setInterval(function(){
            var count = 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100)  
    });

    $("#hoverscroll").click(function() {
        if (count < 6) {
            count = count+1;
        }
    });

    $("#hoverscroll").mouseleave(function() {
        count = 0; 
    });
});

我搜索并发现有些人在谈论绑定事件并设置一个全局变量来检查它是否在滚动.但上述功能会起作用吗？我仍在学习.我可能完全错了.

Answer 1

你非常接近 - 这是我的版本(http://jsfiddle.net/Lcsb6/)

$(document).ready(function() {
    var count;
    var interval;

    $("#hoverscroll").on('mouseover', function() {
        var div = $('body');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100);
    }).click(function() {
        count < 6 && count++;
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        // count = 0;
        clearInterval(interval);
    });
});

变更注意事项:

• count在区间/绑定之上定义.从某种意义上来说,它不是"全局"的,你可以在窗口中看到它,但它被降级为生活在onReady闭包内.
• interval是指定的值setInterval- 这样我们可以阻止它以后做任何事情clearInterval
• 我以前没有见过mouseleave,但mouseout应该这样做.
• 在jQuery中,您可以$('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...)将事物链接在一起 - 这样可以节省每次键入选择器的时间.另外,end()如果您计划使用链接,请查看jQuery的方法.
• 我更喜欢使用$.fn.on而不是像.click()它那样的短序- 它清楚地表示你正在使用一个事件处理程序,考虑投入额外的几个字符on并删除你$()选择中的多余字符？