<script>
    window.onload = function (){
      //1.獲取需要的標(biāo)簽
      var box = document.getElementById("box");
      var box_top = box.children[0];
      var box_bottom = box.children[1];
      var mask = box_bottom.children[0];
      //2.獲取滾動(dòng)條長度
      // 滾動(dòng)條長度 = ( 盒子的寬度 / 內(nèi)容的寬度) * 盒子的寬度
      var mask_length = (box.offsetWidth /box_top.offsetWidth) * box.offsetWidth;
      mask.style.width = mask_length + "px";
      //3.監(jiān)聽鼠標(biāo)按下的事件
      mask.onmousedown = function (event){
        var event = event || window.event;
        //3.1設(shè)置起始位置
        var beginX = event.clientX - mask.offsetLeft;
        //3.2 監(jiān)聽鼠標(biāo)的移動(dòng)
        document.onmousemove =function (event){
          var event = event || window.event;
          //3.2.1求移動(dòng)的位置
          var endX = event.clientX - beginX;

          //3.2.2處理邊界值
          if(endX < 0){
            endX = 0
          }else if(endX >= box.offsetWidth - mask.offsetWidth){
            endX = box.offsetWidth - mask.offsetWidth;
          }
          //3.2.3讓滾動(dòng)條滾動(dòng)
          mask.style.left = endX + "px";

          //3.2.4 讓商品隨著滾動(dòng)
          //公式：內(nèi)容走的距離 = （內(nèi)容的長度 - 盒子的長度） / (盒子長度 - 滾動(dòng)條的長度) * 滾動(dòng)條走的距離
          var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
          box_top.style.left = -content_len + "px";

          return false;
        };
        document.onmouseup = function (){
          document.onmousemove = null;
        }
      }
    }
</script>