滑動div不能平穩移動

Question

我有一個滑塊，我試圖通過使用鼠標移動來滑動，但它不會自然移動，它會分階段跳躍，但我不知道為什么。

我在這里有一個jsfiddle： http : //jsfiddle.net/97Mnf/3/，您將看到滑塊無法正確移動。

我的代碼是：

window.onload = function(){
    document.getElementById('cursor').addEventListener("mousedown", mousePos, false);   
}

function mousePos(e){   
    var x = e.pageX;
    document.getElementById('cursor').addEventListener("mousemove", function(e){mousemoveCalc(e,x);}, false);
    document.getElementById('cursor').removeEventListener("mouseup", mousemoveCalc, false); //not working
    document.getElementById('cursor').removeEventListener("mouseout", mousemoveCalc, false); //not working
}   

function mousemoveCalc(e,x){    
    var difx = 0 + parseInt(x + e.pageX);

            if(difx > 270){
                 difx=270;
            }else if(difx<0){
                 difx=0;
            }

    document.getElementById('cursor').style.left = difx+'px';

}

Answer 1

嘗試var difx = e.pageX-x; 而不是x+e.pageX 。 另外，您可能希望將mousemove事件附加到文檔本身，因此不需要在拖動時將鼠標保持在滑塊上。 最后，您的mouseup邏輯全錯了。 您需要添加一個事件監聽器，該事件監聽器在觸發后會刪除所有處理程序