Вопрос по click, hover, events, jquery, scroll – Прокрутите при наведении, нажмите для скорости

6

Я пытаюсь сделать прокрутку моей страницы, когда вы наводите курсор на элемент 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; 
    });
});

Я искал и обнаружил, что некоторые люди говорят о событии привязки и задают глобальную переменную, чтобы проверить, прокручивается ли она. Но сработает ли вышеуказанная функция? Я еще учусь. Я могу быть совершенно не прав.

Ваш Ответ

4   ответа
8

Вы были довольно близки - вот моя версия (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(...) сэкономит вам время печатать селектор каждый раз. Кроме того, посмотрите на JQuery'send() метод, если вы планируете использовать цепочки.Я предпочитаю использовать$.fn.on вместо коротких, как.click() - он четко обозначает, что вы используете обработчик событий, рассмотрите добавление нескольких дополнительных символов дляon и сбросив лишние символы в вашем$() выборы?
Эффективность в этом случае незначительна - сказав, что вы должны проработать все рабочие решения и понять, как они работают, и применять методы, показанные соответствующим образом, когда они вам нужны. phatskat
Оба решения работали. Поскольку я новичок в этом, я не могу сказать, какой из них более эффективен. Но спасибо, что нашли время, чтобы объяснить код! Ming
2

Вы не так уж далеки от решения. Вам необходимо назначитьinterval или жеtimeout переменная и очистить его, когда вы наводите курсор на элемент:

$(function () {
    var speed = 1,
        timer;
    $("#hoverscroll").hover(function () {
        var div = $('body');
        (function startscrolling(){
            timer = setTimeout(function () {
                var pos = div.scrollTop();
                div.scrollTop(pos + speed);
                startscrolling();
            }, 100);
        })();
    },

    function () {
        clearTimeout(timer);
        speed = 1;
    })
    .click(function(){
         if (speed < 6) speed++;
    });

});

http://jsfiddle.net/3yJVF/2/

0

$(document).ready(function() {
     $("#hoverscroll").mouseover(function() {
       var div = $('body');
      setInterval(function(){
       var pos = $("#hoverscroll").postion().top;       
         window.scrollTo(0, pos + 1)
     },500);

 });
});

увидеть эту скрипку:http://jsfiddle.net/3yJVF/5/

0

Видеть:

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

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

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

http://jsfiddle.net/wzvowvzn

Похожие вопросы