Vurgulu ilerleyin, hız için tıklayın

Question

Bir sayfanın üzerine geldiğinizde sayfamı kaydırmaya çalışıyorum. Bu benim iki şey yapmak için sol vardır, ancak şu ana kadar

http://jsfiddle.net/3yJVF/

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

var yani. Tıkladığınız her seferde hızı artırmak, artık gezinirken durmak ve hızı varsayılana sıfırlamak için buna ihtiyacım var.

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

Aranan ve olay bağlama ve kaydırma eğer kontrol etmek için bir global değişken ayarlama hakkında konuşurken bazı insanlar bulundu:

Böyle bir şey elde etmek çalışıyorum. Ancak yukarıdaki işlev işe yarayacak mı? Ben hala öğreniyorum. Tamamen yanlış olabilirim.

Answer 1

Oldukça yakın edildi - burada versiyonu (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); 
    }); 
}); 

Değişiklikler not:

• count aralık/bağlamaları yukarıda tanımlanmaktadır. Pencerede alabileceğiniz anlamda "global" bir şey değil, ama onReady kapanışı içinde yaşamak için düşüyor. Bu şekilde biz önce mouseleave görmedim clearInterval
• ile sonradan bir şey yapmadan onu durdurmak, ancak mouseout yapmalı -
• intervalsetInterval atanan değerdir.
• jQuery'de, öğeleri bir araya getirebilirsiniz - böylece $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) her seferinde seçiciyi yazmanın zamanından tasarruf etmenizi sağlar. Ayrıca, zincir kullanmayı düşünüyorsanız, jQuery'nin end() yöntemine bir göz atın.
• yerine .click() gibi kısaltmaları ve $.fn.on kullanmayı tercih - bu açıkça, bir olay işleyicisi kullanarak on için fazladan birkaç karakterini atma düşünün ve $() seçimleri aşırı karakterler olarak düştüğünü gösterir? senin keman kurallarına aykırı aşağıdaki

Answer 2

deneyin:

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

}); 
}); 

bu keman bkz: http://jsfiddle.net/3yJVF/5/

Answer 3

Sen çözeltisinden o uzakta değiliz. Her iki çözüm çalıştı

$(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/