欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现商品橱窗特效

程序员文章站 2022-09-02 09:35:29
本文实例为大家分享了js实现商品橱窗特效的具体代码,供大家参考,具体内容如下 知识点 换算公式 ① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度 滚动条长度...

本文实例为大家分享了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;
   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>

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