js實現(xiàn)櫥窗展示效果

更新時間：2020年01月11日 10:03:21 作者：頑張ってちしじょ

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)櫥窗展示的具體代碼，供大家參考，具體內(nèi)容如下

思路

1、獲取需要的標(biāo)簽

2、求出滾動條的長度（公式：滾動條長度 = ( 盒子的寬度 / 內(nèi)容的寬度) * 盒子的寬度）

3、監(jiān)聽鼠標(biāo)按下事件：3 設(shè)置起始位置

4、監(jiān)聽鼠標(biāo)的移動：

4.1求出移動的位置
4.2判斷滾動條的位置（防超出）
4.3 移動滾動條、商品滾動（公式：內(nèi)容走的距離 = （內(nèi)容的長度 - 盒子的長度） / (盒子長度 - 滾動條的長度) * 滾動條走的距離）；

5、監(jiān)聽鼠標(biāo)的離開事件：把鼠標(biāo)的移動事件設(shè)置為無即可。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: