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

Posted 2023-03-14

【中文标题】单击并按住按钮时如何继续滚动图像？

【英文标题】：how to keep on scrolling the image when click and held the button?

【发布时间】：2015-10-06 17:06:04

【问题描述】：

我有一个宽度为 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); );

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

【问题讨论】：

你在编码中尝试过什么？

我尝试使用分页之类的东西。但是当我滚动到最后一页时，位置不正确。

@SFY 请告诉我们您当前的代码。

【参考方案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 故障，上面有注释）。

【讨论】：

我有一个问题，$('#box')，溢出是什么意思？

很高兴能帮上忙，感谢您的跟进。我在那里声明了两个变量。中间加一个逗号比var box = $('#box'); var overflow; 短一点。希望能解释清楚。

我太笨了，能不能把文件 $(document).ready(function() 放进去？

它已经包含在 $(function() ... ); 中，这是它的简写。应该作为外部（链接）脚本工作 - 或在文档本身中工作，但它当然需要 <script> 标记。