如图
思路 : 1 .这个列子的主要注意点就是先求导航条的长度出来 .公式: 导航条的offsetWidth /box.offsetWidth = box.offsetWidth / oUl.offsetWidth ; 2 .求出当导航条被点击 (onmousedown)时该点的坐标(就是该点与导航条自己左边的距离) distanceX; distanceX = event.clientX - mask.offsetLeft ; 3 当window.onmousemove 的时候 该点与左边的距离,滚动条滚动的距离(就是滚动条滚动了多少与自己原来左边的距离)leftV = event.clientX - distanceX ; 4.判断移动的范围 if.leftv 小于0 . else if leftv>= box.offsetWidth - mask.offsetWidth ;然后赋值给 mask.style.left = leftv + 'px';5.最主要的 还是判断求出 ul 移动的值 :公式 " 导航条移动的距离 leftV / oUl 移动的距离 = (box.offsetWidth - mask.offsetWidth)/(oUl.offsetWidth - box.offsetWidth)" 得出 的就是 oUlX = - leftV* (oUl.offsetWidth - box.offsetWidth)/(box.offsetWidth - mask.offsetWidth)"
注意点 : 鼠标移动结束后 加 return false , 在window.onmouseup 里面添加return false 它主要是用于 避免点击移动事件时 连带获取 东西 代码如下
鼠标抬起事件是清除移动事件
