7.1.水平进度条 的实现

如图 

思路 :  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   它主要是用于 避免点击移动事件时  连带获取 东西 代码如下  

鼠标抬起事件是清除移动事件