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故障，上面有注释）。

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

1 个答案: