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

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}); });

我应该计算 mousedown 时间吗？我该怎么做？

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 是否或何时会变成点击。所以它是连续的，但接近预期结果。

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

实例中的一行可以忽略(这是一个 Codepen 故障，上面有注释)。