0

我有一个滑块，我试图通过使用鼠标移动来滑动，但它不会自然移动，它会分阶段跳跃，但我不知道为什么。

我在这里有一个 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';

}
4

1 回答 1

1

尝试var difx = e.pageX-x;代替x+e.pageX. 此外，您可能希望将mousemove事件附加到文档本身，以便在拖动时不需要将鼠标保持在滑块上。最后，你的mouseup逻辑全错了。您需要添加一个事件侦听器，该事件侦听器在触发时会删除所有处理程序

于 2013-04-02T03:53:44.630 回答