js實現櫥窗展示效果

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

          //3.2.4 讓商品隨著滾動
          //公式：內容走的距離 = （內容的長度 - 盒子的長度） / (盒子長度 - 滾動條的長度) * 滾動條走的距離
          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>