如何連續滾動開始mousedown直到mouseup？

我看到有一些類似的問題，但我無法正確理解實現。因此，我要求具體針對我的情況。如何連續滾動開始mousedown直到mouseup？

我的網頁上有jQuery flot圖表。有水平和垂直的jQuery滑塊，我已經編程來水平和垂直移動圖表。現在，我想放置圖像箭頭按鈕（左側，右側，頂部，底部），這將允許在mousedown上連續滾動圖表直到mouseup事件。

當mousedown按鈕仍然存在時，圖表應該在每0.5秒說出一次後連續滾動固定像素。它應該停止一旦mouseup發生。我不想使用任何jQuery插件來實現這一點。

任何人都可以請幫我寫相同的代碼嗎？

來源

2011-05-30 CleanBold

首先，我假設您使用的是jQuery UI滑塊。

有3個步驟來實現你的意圖。

圖像元素
添加事件偵聽器添加到頁面中的鼠標按下和mouseup對這些元素的事件。
在每個事件監聽器中，調用jQueryUI滑塊元素上的value方法。

你將不得不爲第3步

//These two declared somewhere in scope for the remainder. 
var animationHandler; 
function slideLeft(){ 
    element.slider("value",element.slider("value") + 1) 
} 


$(elem).mousedown(function(e){ 
    animationHandler = window.setInterval(slideLeft, 500); 
}); 

$(elem).mouseup(function(e){ 
    window.clearInterval(animationHandler); 
});

然後做這樣的事情，只要你當前的實現勢必滑塊change事件，一切都應該站出來在洗臉。

這是所需代碼的相當高級別的概述，但它應該讓你朝着正確的方向前進。

希望它有幫助！

來源

2011-05-30 06:34:56 idbentley

我的主要問題是關於如何在mousedown事件發生之前實現連續滾動，直到mouseup。我知道如何使用滑塊或自定義邏輯滾動圖表。 – CleanBold 2011-05-30 07:16:04

我已經擴展了我的答案以展示如何進行連續滾動。 – idbentley 2011-05-30 08:26:27

完美！這就像一個魅力。謝謝... – CleanBold 2011-05-30 11:19:29

只是動畫使用

$('#foobar').mousedown(function(){ 
    $('#foobar').animate({ 
     scrollTop: $('#foobar').height() 
    }); 
});

當鼠標按下的scrollTop的參數。然後在mouseup有它

$('#foobar').mouseup(function(){ 
    $('#foobar').stop(); 
});

這將停止滾動動畫。未經測試，但應該有效。

來源

2011-05-30 06:45:42 trusktr

如何連續滾動開始mousedown直到mouseup？

回答

相關問題