Question

我有一个很好的工作滑块脚本（没有使用库）。我需要一个数学概念，允许滑块在指定的像素间隔上执行回调。因此，例如，我的滑块是300px宽，我指定间隔= 10，然后当用户滑动手柄时，回调应该发生在像素位置10,20,30,40，依此类推。如果间隔= 3，那么回调应该发生在像素位置3,6,9,12 ......等处。这是我正在寻找的数学公式。任何帮助将不胜感激。

专利

Answer 1

所以说你有变量：

var width = 300;   // px
var interval = 10; // px
var pos; // current position

然后你应该这样做：

if ( pos % interval === 0 ) 
  // do stuff

这称为modulus operator，它将left_var的剩余部分返回right_var。如果remainder为0，则您的检查将返回true，因此您可以执行回调（完全在像素10,20,30,40等处）。

但是请注意，认为你能够处理每个像素变化是非常天真的......我宁愿做的是检查滑块是否已进入给定的段。

var segment = 1;

然后在滑块状态发生变化后，检查位置如下：

if ( Math.floor( pos / interval ) === segment ) {
  // do stuff because the slider
  // has entered a new segment
  // ...
  segment++;
}

如果滑块向后移动并且您想要相应地触发事件，则只需递减段而不是递增。

如何让我的滑块在每个指定的像素间隔做一些事情？

1 个答案: