在悬停时滚动，点击速度 [英] Scroll on hover, click for speed

问题描述

当您将鼠标悬停在div上时，我想让我的页面滚动。这是我到目前为止

I am trying to make my page scroll when you hover on a div. This is what I got so far

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

http://jsfiddle.net/3yJVF/

但是，还有两件事要做。我需要它来提高速度，每次你点击，停止时，你不再徘徊，并将速度重置为默认值。

However, there are two things left to do. I need it to increase speed each time you click, stop when you're no longer hovering and reset the speed back to default.

我想实现这：

$(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; 
    });
});

我搜索并发现一些人谈论绑定事件并设置一个全局变量来检查它是否滚动。但是上面的函数会工作吗？我仍在学习。我可能完全错了。

I searched and found some people talking about binding event and setting a global variable to check if it's scrolling. But will the above function work? I am still learning. I might be completely wrong.

推荐答案

你很亲近 - 这是我的版本（ http://jsfiddle.net/Lcsb6/ ）

You were pretty close - here's my version (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（...）。 on（...）。addClass（...）。blah（...）会节省你每次输入选择器的时间。另外，如果你计划使用链接，请查看jQuery的 end（）方法。


• 我更喜欢使用 $。fn.on 而不是像 .click（）这样的shorthands - 它清楚地表示你正在使用事件处理程序，在在上多余的字符并删除 $（）选择中的多余字符？



• count is defined above the interval/bindings. It's not quite "global" in the sense that you can get to it in the window, but it is relegated to living inside the onReady closure.
• interval is the assigned value of setInterval - this way we can stop it from doing anything later with clearInterval
• I haven't seen mouseleave before, but mouseout should do it.
• In jQuery, you can chain things together - so $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) will save you the time of typing out the selector each time. Also, have a look at jQuery's end() method if you plan on using chaining.
• I prefer to use $.fn.on instead of the shorthands like .click() - it clearly denotes that you are using an event handler, consider throwing in the extra few characters for on and dropping the excess characters in your $() selections?

这篇关于在悬停时滚动，点击速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！