Question

我看到有一些类似的问题，但我无法正确理解实施。因此，我问这个具体到我的情景。

我的网页上有jQuery flot chart。有水平和垂直jQuery滑块，我已经编程，可以水平和垂直移动图表。现在，我想放置图像箭头按钮（左，右，上，下），这样可以在mousedown上连续滚动图表直到mouseup事件。

当mousedown按钮仍然存在时，图表应该每隔0.5秒说一次连续滚动固定像素。一旦鼠标发生，它应该停止。我不想使用任何jQuery插件来实现这一点。

有人可以帮我写相同的代码吗？

Answer 1

首先，我假设您正在使用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事件，所有内容都应该在清洗中出现。

这是对所需代码的相当高级别的概述，但它应该让您朝着正确的方向前进。

希望它有所帮助！

Answer 2

使用

设置scrollTop参数的动画

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

当mousedown时。然后在mouseup上做它

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

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

如何连续滚动启动mousedown直到mouseup？

2 个答案: