单击并按住按钮时如何继续滚动图像？

Question

我有一个宽度为 3000 像素的图像，放在 150 像素宽度内。我还有一个左右按钮，可以在 div 内左右滚动图像

<div id='box'><img src='img.png'/></div><a id='btnleft'>left</a><a id='btnright'>right</a>

我想将图像向左滚动。如果onclick 仅滚动 10px。如果mousedown 则继续滚动直到图像结束。如果mouseup 停止滚动。

var imgWidth = 3000;
var divWidth = 130;
var scrollwidth = imgWidth/divWidth;
$('#btnleft').click(function (){ $('#bg_img').animate({left: +=scrollwidth}); });
$('#btnright').click(function (){ $('#bg_img').animate({left: -=scrollwidth}); });

我应该计算鼠标按下的时间吗？我该怎么做？

Answer 1

这里有一些代码可以做到这一点：

Demo

$(function() {

var box = $('#box'), overflow;

$(window).on('load resize', function() {

  var range = $('img').outerWidth();
  overflow = range-box.width();
});

$('button').on('mousedown', function() {

  var spot = box.scrollLeft();

  if (this.id == 'left-button') {
    var aim = 0,
    duration = spot;
  }
  else {
    aim = overflow;
    duration = aim-spot;
  }

  box.animate({scrollLeft: aim}, duration*5);
})
.on('mouseup mouseleave', function() {

  box.stop();
});
});

它不完全符合10px 的要求，但是没有简单的方法来区分鼠标按下是否或何时变为点击。所以它是连续的，但接近预期的结果。

没什么太神秘的，它会检查按钮上mousedown 的左滚动位置，然后动画到任一侧。持续时间是根据需要滚动到该位置以保持稳定速度的量来设置的。当按钮触发mouseup 或mouseleave 时动画停止。

现场示例中的一行可以忽略（这是针对 Codepen 故障，上面有注释）。