欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JS如何實現商品櫥窗特效

小編給大家分享一下JS如何實現商品櫥窗特效，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯是一家專注于成都網站設計、網站制作與策劃設計,廣安網站建設哪家好?成都創(chuàng)新互聯做網站,專注于網站建設十余年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:廣安等地區(qū)。廣安做網站價格咨詢:028-86922220

具體內容如下

知識點

換算公式
① 滾動條長度 = ( 盒子的寬度 / 內容的寬度) * 盒子的寬度
滾動條長度/盒子的長度 = 盒子的長度/內容的長度
② 內容走的距離 = （內容的長度 - 盒子的長度）/ （盒子的長度 - 滾動條的長度）* 滾動條走的距離

運行效果

JS如何實現商品櫥窗特效

代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
   border:none;
  }

  #box{
   width: 800px;
   height: 200px;
   border: 1px solid #ddd;

   position: relative;
   margin: 100px auto;

   overflow: hidden;
  }

  #box ul{
   width: 5200px;
   position: absolute;
   left: 0;
   top: 20px;
  }

  #box ul li{
   float: left;
  }

  #box_bottom{
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: #e8e8e8;

   width: 100%;
   height: 25px;
  }

  .mask{
   position: absolute;
   left: 0;
   top:0;
   height: 25px;
   background-color: orangered;
   border-radius: 12px;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div id="box">
  <ul id="box_top">
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
  </ul>
  <div id="box_bottom">
   <span class="mask"></span>
  </div>
 </div>

<script>
 window.onload = function () {
  // 1. 獲取需要的標簽
  var box = document.getElementById("box");
  var box_top = document.getElementById("box_top");
  var box_bottom = document.getElementById("box_bottom");
  var mask = box_bottom.children[0];

  // 2. 設置滾動條的長度
  // 滾動條長度 = ( 盒子的寬度 / 內容的寬度) * 盒子的寬度
  var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
  mask.style.width = mask_len + 'px';

  // 3. 鼠標操作
  mask.onmousedown = function (event) {
   var e = event || window.event;

   // 3.1 求出初始值
   var beginX = e.clientX - mask.offsetLeft;

   // 3.2 移動
   document.onmousemove = function (event) {
    var e = event || window.event;

    // 3.3 求出移動的距離
    var endX = event.clientX - beginX;

    // 邊界值
    if(endX < 0){
     endX = 0;
    }else if(endX >= box.offsetWidth - mask.offsetWidth){
     endX = box.offsetWidth - mask.offsetWidth;
    }


    // 3.4 動起來
    mask.style.left = endX + 'px';

    // 內容走的距離 = （內容的長度 - 盒子的長度）/ （盒子的長度 - 滾動條的長度）* 滾動條走的距離
    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>
</body>
</html>

以上是“JS如何實現商品櫥窗特效”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！

本文標題：JS如何實現商品櫥窗特效
轉載來于：http://chinadenli.net/article2/podooc.html

成都網站建設公司_創(chuàng)新互聯，為您提供企業(yè)建站、網站改版、網站排名、網站策劃、網頁設計公司、服務器托管

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

商城網站建設