进度条

shank.onmousedown=function (event) {
  //获取初始位置
  var offsetLeft = event.clientX - shank.offsetLeft;
    navBox5.onmousemove=function (event) {
      //获取鼠标移动
      var x = event.clientX - offsetLeft;
      //边界值处理
      if(x<0){
          x = 0;
      }else if (x>=bar.offsetWidth - shank.offsetWidth){
          x = bar.offsetWidth - shank.offsetWidth;
      }
      shank.style.left = x + 'px';
      progressFg.style.width = x + 'px';
      progressValue.innerHTML = parseInt(x/(bar.offsetWidth - shank.offsetWidth) *100) + '%';
      return false;
  };
  navBox5.onmouseup= function () {
      navBox5.onmousemove = null;
  }
};

var nav = $('nav');
var smallNav =document.getElementsByClassName("nav");
console.log(navBox5.offsetLeft);
bar.onmousedown=function (event) {
    //获取鼠标点击
    var x = event.clientX - navBox5.offsetLeft - progress.offsetLeft*0.75 - ((nav.offsetWidth-smallNav[0].offsetWidth)*0.5)-shank.offsetWidth;
    //走起来
    shank.style.left = x + 'px';
    progressFg.style.width = x + 'px';
    progressValue.innerHTML = parseInt(x / (bar.offsetWidth - shank.offsetWidth) * 100) + '%';
};

事件里面不能再插入同类型的事件，获取鼠标点击不能写数值，不然网页变了，鼠标点击也会变