我有一个用 Javascript 制作的 slider ,但它的移动不太正确,它似乎在加速,而不是保持与鼠标相同的速度。
我知道这是一个逻辑错误,但我无法弄清楚我做错了什么,所以我希望有人能够发现这个错误。
处理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
最佳答案
非常简洁的小部件/实现。我更新了fiddle才能正常工作。
已添加
var dif = e.pageX - clickX;
clickX = e.pageX;// update clickX so next time you calculate the right dif
因为否则它会从一开始就计算差异,而不是从上次计算差异时开始计算差异。
关于javascript - Div slider 无法随着鼠标移动而正确移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17538982/