Div滑块在鼠标移动时无法正确移动

时间:2013-07-09 02:31:55

标签: javascript

我有一个用Javascript制作的滑块但它移动得不太正确,它似乎加速而不是保持与鼠标相同的速度。

我知道这是一个逻辑错误,但我无法弄清楚我做错了什么,所以我希望有人能发现错误。

处理div的功能是:

var calc = function (e) {
    var dif = e.pageX - clickX;
    var parentWidth = parseInt(window.getComputedStyle(el.parentNode).width);
    var childWidth = parseInt(window.getComputedStyle(el).width);
    var childLeft = parseInt(window.getComputedStyle(el).left);
    var left = childLeft + dif;

    if (left < 0) { left = 0; }
    else if (left > (parentWidth-childWidth)) { left = (parentWidth-childWidth); }

    el.style.left = left + 'px';
};

我提供了一个 JSFiddle 以及它正在使用中:JSFiddle

1 个答案:

答案 0 :(得分:2)

非常整洁的小部件/实现。我更新了fiddle以使其正常工作。

    var dif = e.pageX - clickX;
    clickX = e.pageX;// update clickX so next time you calculate the right dif

因为否则它从一开始就计算差异,而不是从最后一次计算差异。