使用原生JS实现一个风箱式的demo，并封装了一个运动框架

 1 function getStyle(obj,attr) {
 2     if(obj.currentStyle){
 3         return obj.currentStyle[attr];//为了获取IE下的属性值
 4     }else{
 5         return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值
 6     }
 7 }
 8 
 9 function animate(obj,json){
10     clearInterval(obj.timer);
11     obj.timer = setInterval(function () {
12         var flag = true;
13         var current = 0;
14         for(var attr in json){
15             if(attr == ‘opacity‘){
16                 current = parseInt(getStyle(obj,attr)*100);
17             }else{
18                 current = parseInt(getStyle(obj,attr));
19             };
20 
21             var step = (json[attr] - current) / 10;
22             step = step > 0 ? Math.ceil(step) : Math.floor(step);
23             //先判断属性是否为透明度
24             if(attr == ‘opacity‘){
25                 //首先判断浏览器是否支持opacity
26                 if(‘opacity‘ in obj.style){
27                     obj.style.opacity = (current + step) / 100;
28                 }else{
29                     obj.style.filter = ‘alpha(opacity = ‘ + (current + step) + ‘)‘;
30                 }
31             //再判断属性是否为z-index
32             }else if(attr == ‘zIndex‘){
33                 obj.style.zIndex = json[attr];
34             //最后再判断
35             }else{
36                 obj.style[attr] = current + step + ‘px‘;
37             }
38 
39             if(current != json[attr]){
40                 flag = false;
41             }
42         }
43 
44         if(flag){
45             clearInterval(obj.timer);
46         }
47     },5);
48 }

1 <div id="box">
2     <ul>
3         <li></li>
4         <li></li>
5         <li></li>
6         <li></li>
7         <li></li>
8     </ul>
9 </div>

 1 *{
 2         margin:0px;
 3         padding:0px;
 4     }
 5     #box{
 6         width:1300px;
 7         height:400px;
 8         margin:100px auto;
 9         overflow: hidden;
10     }
11     #box ul{
12         height:400px;
13         width:1300px;
14     }
15     #box ul li{
16         width:240px;
17         height:400px;
18         float:left;
19         overflow: hidden;
20     }

 1 window.onload = function () {
 2         var box = document.getElementById(‘box‘);
 3         var aLi = box.children[0].children;
 4         for(var i=0;i<aLi.length;i++){
 5             aLi[i].style.backgroundImage = ‘url(‘ + ‘images/‘ + (i + 1) + ‘.jpg‘;
 6             aLi[i].onmouseover = function(){
 7                 for(var i=0;i<aLi.length;i++){
 8                     animate(aLi[i],{width:100});
 9                 }
10                 animate(this,{width:800});
11             };
12             aLi[i].onmouseout = function(){
13                 for(var i=0;i<aLi.length;i++){
14                     animate(aLi[i],{width:240});
15                 }
16             }
17         }
18     }