如何连续滚动从mousedown开始直到mouseup？

问题描述

| 我看到有一些类似的问题，但是我无法正确理解其实现。因此，我要针对我的情况提出这个要求。 我的网页上有jQuery flot图表。我已编程了水平和垂直jQuery滑块，以水平和垂直移动图表。现在，我要放置图像箭头按钮（左，右，上，下），这将允许在mousedown时连续滚动图表直到mouseup事件。 当鼠标按下按钮仍在时，图表应每隔0.5秒连续滚动固定像素一次。一旦发生mouseup，它应该停止。我不想使用任何jQuery插件来实现此目的。 谁能帮我写同样的代码吗？     

解决方法

        首先，我假设您正在使用jQuery UI滑块。 有3个步骤可以实现您的意图。 将图像元素添加到页面 将事件侦听器添加到这些元素上的mousedown和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

事件，一切都应该洗净。 这是所需代码的较高层次的概述，但是它应该使您朝正确的方向前进。 希望对您有所帮助！     ,        只需为使用

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

按下鼠标时。然后在mouseup上做

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

这将停止滚动动画。未经测试，但应该可以。