手风琴的原理及实现过程

Bertha 。 2022-06-18 09:58 237阅读 0赞

<!DOCTYPE html>  
<html>  
<head lang="en">  
  <meta charset="UTF-8">  
  <title></title>  
  <style>  
    ul \{  
      list-style: none  
    \}  
      
    \* \{  
      margin: 0;  
      padding: 0;  
    \}  
      
    div \{  
      position: relative;  
      width: 1200px;  
      height: 400px;  
      margin: 50px auto;  
      border: 1px solid red;  
      overflow: hidden;  
    \}  
      
    div li \{  
      width: 1200px;  
      height: 400px;  
      /\*float: left;\*/  
      position: absolute;  
    \}  
      
    div ul \{  
      width: 1200px;  
    \}  
  </style>  
</head>  
<body>  
<div id="box">  
  <ul>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
  </ul>  
</div>  
  
  
  
  
<script>  
  
  
  
  
手风琴主要是几个盒不触发事件时，会相同大小的排列在一排  
这里我们是通过定位的布局，每次移动鼠标改变他们的left值实现的；  
也可以用浮动改宽度的方式；

![SouthEast][]

![SouthEast 1][]

//1 获取元素  
  var box = document.getElementById("box");  
  
  
  var box = document.getElementById('box');  
  
  
  var lis = box.children\[0\].children;//操作的li  
  
  
  var lis = box.children\[0\].children;  
  
  
  
  
  
  
  for(var i =0; i < lis.length; i++)\{  
  
  
    lis\[i\].style.background = 'url(images/'+(i+1)+'.jpg)'  
  
  
    animatess(lis\[i\], 'left', i\*240); //鼠标不移入的时候，每个盒子的宽度相等  
  
  
    lis\[i\].index = i;  
  
  
    lis\[i\].onmouseover = function()\{   
  
  
      for(var j = 0; j < lis.length; j++)\{  
  
  
        if(lis\[j\].index <= this.index)\{ //当盒子移入时：  
  
  
          animatess(lis\[j\],'left', j\*100);      //自身和之前的图片的left是i\*100;  
  
  
        \}else\{  
  
  
          animatess(lis\[j\], 'left', j\*100+700); //自身之后的图片的left值是i\*100+700;  
        \}  
      \}  
  
  
    \}  
  
  
    lis\[i\].onmouseout = function()\{  
  
  
      for(var j = 0; j < lis.length; j++)\{  
  
  
        animatess(lis\[j\], 'left', j\*240);  
      \}  
    \}  
  
  
  \}  
  
  
  
  
  
  
  
  
// 还是那个运动函数  
  
  
  function animatess(tag,attr,target)\{  
  
  
    clearInterval(tag.timer);  
  
  
    tag.timer = setInterval(function()\{  
  
  
      var leader = parseInt(getStyle(tag,attr)) || 0;  
  
  
      var step = (target - leader) / 10;  
  
  
      step = step > 0 ? Math.ceil(step) : Math.floor(step);  
  
  
      leader = leader + step;  
  
  
      tag.style\[attr\] = leader + 'px';  
  
  
      if(leader == target)\{  
  
  
        clearInterval(tag.timer);  
      \}  
    \},20)  
  
  
  \}  
  
  
  function getStyle(tag,attr)\{  
  
  
    return tag.currentStyle ? tag.currentStyle\[attr\] : getComputedStyle(tag,null)\[attr\];  
  \}  
  
  
</script>  
</body>  
</html>

[SouthEast]: /images/20220618/6260b54040d446c1bd212acb6413449b.png
[SouthEast 1]: /images/20220618/539140e6020543cd9b67f4e7e0a57bdb.png