Question

我正在尝试创建jquery滑块控件的纯javascript版本。

我不确定这是否是正确的方法，但这是我到目前为止所做的：

document.getElementById("my-bar").addEventListener("mousedown", mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

function mouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e){
 window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
  document.getElementById('my-bar').style.left = (e.clientX) + 'px';
  //document.getElementById('my-slider').style.overflow = absolute;
  //var coOrds = document.getElementById('my-coords').innerHTML=(offSetX);

}

是否可以将深灰色条约束在较浅的灰色条内，使其不会越过边缘？

这是接近这项任务的好方法吗？

Answer 1

当然，这不是一个坏主意。您只需添加一个if语句来检查边界，并从计算中减去条的宽度

function divMove(e){
    if(e.clientX < parent.offsetLeft + parent.clientWidth // Upper bounds
       && e.clientX >= parent.offsetLeft) // Lower bounds
        document.getElementById('my-bar').style.left = 
                                            (e.clientX - bar.clientWidth) + 'px';
}

Demo

将元素保存到变量以提高可读性和可重用性通常是一种很好的做法

在旁注中，HTML5为input引入了一个新的range type，您可能对现代浏览器感兴趣

约束容器中的元素以创建javascript滑块

1 个答案: