主页 / 网络编程 /

JS实现商品橱窗特效

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了JS实现商品橱窗特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
   : 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;
   :0;
   height: 25px;
   background-color: orangered;
   border-radius: 12px;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div id="box">
  <ul id="box_">
   <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_ = document.getElementById("box_");
  var box_bottom = document.getElementById("box_bottom");
  var mask = box_bottom.children[0];

  // 2. 设置滚动条的长度
  // 滚动条长度 = ( 盒子的宽度 / 内容的宽度)  盒子的宽度
  var mask_len = (box.offsetWidth / box_.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_.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth)  endX;
    box_.style.left = -content_len + 'px';

    return false;
   };

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：Vue快速实现通用表单验证的示例代码 下一篇：微信小程序实现页面浮动导航

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by