懸停時的連續/無限水平滾動

我有一個擱板，當您將鼠標懸停在左側或右側按鈕上時左右滾動。然而，目前這隻能滾動定義的數量......並且這個架子將通過延遲加載來填充，所以沒有真正的方法來知道架子有多寬。懸停時的連續/無限水平滾動

當然，我可以將數字設置爲99999999，並將動畫速度設置爲類似的高數，但肯定有更明智的方法可以做到這一點嗎？沒有插件！

感謝您的幫助..

$('.scroll-arrow').each(function(){ 
    var modifier = ($(this).hasClass('right')) ? 1 : -1; 
    var sib = ('.shelf-slide'); 
    var sl = 0; 

    $(this).hover(function() { 
     sl = $(this).siblings(sib).scrollLeft(); 
     $(this).siblings(sib).stop(); 
     $(this).siblings(sib).animate({scrollLeft: sl + (modifier * 1000)}, 5000, 'linear'); 
    }, function() { 
     $(this).siblings(sib).stop(); 
    }); 
});

來源

2013-10-31 Jake

像箭頭，你可以創建一個功能，以保持動畫這個？ [http://jsfiddle.net/A3mPw/7/](http://jsfiddle.net/A3mPw/7/） –

完美。做得好。如果你答覆作爲答案，我會接受它。 – Jake

當你將鼠標懸停這樣

function animatecontent(ele,modifier){//function to scroll 
    var sl = ele.scrollLeft(); 
    //120 should be the width of the ".content" and 500 the time to scroll 1 ".content" 
    ele.animate({scrollLeft: sl + (modifier * 120)}, 500, 'linear',function(){ 
     if(hover){//on callback if it is still hover call the same function 
      animatecontent(ele,modifier); 
     } 
    }); 
}; 
var hover=false; 
$('.scroll-arrow').each(function(){ 
    var modifier = ($(this).hasClass('right')) ? 1 : -1; 
    var sib = ('.shelf-slide'); 
    $(this).hover(function() { 
     hover=true; 
    $(this).siblings(sib).stop(); 
     animatecontent($(this).siblings(sib),modifier);//pass the element to animate and the modifier  
    }, function() { 
     hover=false; 
     $(this).siblings(sib).stop(); 
    }); 
});

http://jsfiddle.net/A3mPw/7/

來源

2013-10-31 16:49:01

感謝您的解釋。 – Jake

懸停時的連續/無限水平滾動

回答

相關問題