手风琴效果-原创手记-慕课网

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>

 ul {
      list-style: none;
 }

    * {
      margin: 0;
 padding: 0;
 }

    div {
      width: 1150px;
 height: 400px;
 margin: 50px auto;
 border: 1px solid red;
 /* overflow: hidden;*/
 }

    div li {
      width: 240px;
 height: 400px;
 float: left;
 }

    div ul {
      width: 1300px;
 }


  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值

//DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是只读的。IE678 中则用 currentStyle 代替 。
 function getStyle(element,attr){
 return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }

//动画函数
 function animate(element,json,fn){
 //清理定时器
 clearInterval(element.timeId);
 //设置定时器，返回的是定时器的ID
 element.timeId=setInterval(function(){
 //默认，假设全部到达目标
 var flag=true;
 //遍历json对象中的每个属性还有属性对应的目标值
 for(var attr in json){
 //判断这个属性attr中是不是opacity
 if(attr=="opacity"){
 //获取元素的当前的透明度，当前的透明度放大100倍
 var current=getStyle(element,attr)*100;
 //目标的透明度放大100倍
 var target=json[attr]*100;
 var step=(target-current)/10;
 step=step>0?Math.ceil(step):Math.floor(step);
 //移动后的值
 current+=step;
 element.style[attr]=current/100;
        }else if(attr=="zIndex"){
 //判断这个属性attr中是不是zIndex

          //层级改变就是直接改变这个属性的值
 element.style[attr]=json[attr];
        }else{
 //普通的属性
 //获取元素这个属性的当前的值
 var current=parseInt(getStyle(element,attr));
 //当前的属性对应的目标值
 var target=json[attr];
 //移动的步数
 var step=(target-current)/10;
 step=step>0?Math.ceil(step):Math.floor(step);
 //移动后的值
 current+=step;
 element.style[attr]=current+"px";
        }
 //是否到达目标
 if(current!=target){
 flag=false;
        }
      }
 if(flag){
 //清理定时器
 clearInterval(element.timeId);
 //所有的属性到达目标才能使用这个函数，前提是用户传入了这个函数
 if(fn){
 fn();
        }
      }
 //测试代码
 console.log("目标："+target+"当前:"+current+",每次移动的步数:"+step);
    },20)
  }

 //先获取所有的li标签
 var list=my$("box").getElementsByTagName("li");
 for(var i=0;i<list.length;i++){
 list[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
 //鼠标进入
 list[i].onmouseover=mouseoverHandle;
 //鼠标滑出
 list[i].onmouseout=mouseoutHandle;
  }
 //鼠标进入的函数
 function mouseoverHandle(){
 for(var j=0;j<list.length;j++){
 //动画效果
 animate(list[j],{"width":100});
    }
 animate(this,{"width":800});
  }
//鼠标滑出的函数
 function mouseoutHandle(){
 for(var j=0;j<list.length;j++){
 animate(list[j],{"width":240});
    }
  }
</script>


</body>
</html>