JS實(shí)現(xiàn)商品櫥窗特效

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

本文實(shí)例為大家分享了JS實(shí)現(xiàn)商品櫥窗特效的具體代碼，供大家參考，具體內(nèi)容如下

知識(shí)點(diǎn)

換算公式
① 滾動(dòng)條長(zhǎng)度 = ( 盒子的寬度 / 內(nèi)容的寬度) * 盒子的寬度
滾動(dòng)條長(zhǎng)度/盒子的長(zhǎng)度 = 盒子的長(zhǎng)度/內(nèi)容的長(zhǎng)度
② 內(nèi)容走的距離 = （內(nèi)容的長(zhǎng)度 - 盒子的長(zhǎng)度）/ （盒子的長(zhǎng)度 - 滾動(dòng)條的長(zhǎng)度）* 滾動(dòng)條走的距離

運(yùn)行效果

代碼

<!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. 獲取需要的標(biāo)簽
  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. 設(shè)置滾動(dòng)條的長(zhǎng)度
  // 滾動(dòng)條長(zhǎng)度 = ( 盒子的寬度 / 內(nèi)容的寬度) * 盒子的寬度
  var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
  mask.style.width = mask_len + 'px';

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

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

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

    // 3.3 求出移動(dòng)的距離
    var endX = event.clientX - beginX;

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


    // 3.4 動(dòng)起來
    mask.style.left = endX + 'px';

    // 內(nèi)容走的距離 = （內(nèi)容的長(zhǎng)度 - 盒子的長(zhǎng)度）/ （盒子的長(zhǎng)度 - 滾動(dòng)條的長(zhǎ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>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：你知道JavaScript Symbol類型怎么用嗎

欄目：JavaScript

下一篇：JS實(shí)現(xiàn)網(wǎng)站吸頂條

本文標(biāo)題：JS實(shí)現(xiàn)商品櫥窗特效

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9256.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

JS實(shí)現(xiàn)商品櫥窗特效

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀