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

声明，该DEMO依托于某个培训机构中，非常感谢这个培训结构。话不多说，现在开始改demo的制作。

首先，在前端的学习过程中，轮播图是我们一定要学习的，所以为了更加高效的实现各种轮播图，封装了一个运动的框架。

 function getStyle(obj,attr) {
     if(obj.currentStyle){
         return obj.currentStyle[attr];//为了获取IE下的属性值
     }else{
         return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值
     }
 }

 function animate(obj,json){
     clearInterval(obj.timer);
     obj.timer = setInterval(function () {
         var flag = true;
         var current = 0;
         for(var attr in json){
             if(attr == 'opacity'){
                 current = parseInt(getStyle(obj,attr)*100);
             }else{
                 current = parseInt(getStyle(obj,attr));
             };

             var step = (json[attr] - current) / 10;
             step = step > 0 ? Math.ceil(step) : Math.floor(step);
             //先判断属性是否为透明度
             if(attr == 'opacity'){
                 //首先判断浏览器是否支持opacity
                 if('opacity' in obj.style){
                     obj.style.opacity = (current + step) / 100;
                 }else{
                     obj.style.filter = 'alpha(opacity = ' + (current + step) + ')';
                 }
             //再判断属性是否为z-index
             }else if(attr == 'zIndex'){
                 obj.style.zIndex = json[attr];
             //最后再判断
             }else{
                 obj.style[attr] = current + step + 'px';
             }

             if(current != json[attr]){
                 flag = false;
             }
         }

         if(flag){
             clearInterval(obj.timer);
         }
     },5);
 }

在该框架中兼容了不同的浏览器，并且允许传入opacity和z-index这样的属性，当然，像width,height,left,right这样常见的属性是必不可少的。利用该框架，可以实现非常棒的效果。所以现在开始正式做该DEMO。

首先是index.html的制作。

 <div id="box">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
     </ul>
 </div>

index.html的制作非常的简单，我们会将图片作为li的背景图片在javascript中进行插入。之后，我们进行CSS样式的调节。

 *{
         margin:0px;
         padding:0px;
     }
     #box{
         width:1300px;
         height:400px;
         margin:100px auto;
         overflow: hidden;
     }
     #box ul{
         height:400px;
         width:1300px;
     }
     #box ul li{
         width:240px;
         height:400px;
         float:left;
         overflow: hidden;
     }

javascript的代码如下：

 window.onload = function () {
         var box = document.getElementById('box');
         var aLi = box.children[0].children;
         for(var i=0;i<aLi.length;i++){
             aLi[i].style.backgroundImage = 'url(' + 'images/' + (i + 1) + '.jpg';
             aLi[i].onmouseover = function(){
                 for(var i=0;i<aLi.length;i++){
                     animate(aLi[i],{width:100});
                 }
                 animate(this,{width:800});
             };
             aLi[i].onmouseout = function(){
                 for(var i=0;i<aLi.length;i++){
                     animate(aLi[i],{width:240});
                 }
             }
         }
     }

这样使用原生JS实现的风箱效果demo就实现了，当然，还可以利用封装好的animate框架实现类似网易的轮播图效果。