手风琴效果（js版本以及jquery版本）

最近又复习了jQuery的知识，既然jQuery是javascript的一个库。jQuery能做到的事情javascript也能做到。因此用这两种方法实现了图片手风琴效果
按照惯例，还是上代码吧，因为代码里有我的注释也就相当于解释了！(^__^) 嘻嘻……
先看一下javascript的代码吧：
div布局： 注意哦，里面的图片我们用js代码生成

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

css样式

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            #box{
                width: 1150px;
                height: 400px;
                margin: 50px auto;
                border: 1px solid red;
                overflow: hidden;
            }
            #box ul{
                width: 1300px;
            }
            #box ul li{
                width: 240px;
                height: 400px;
                float: left;

            }
        </style>

要写js代码了。这里封装了一个完整的运动框架（我个人 觉得哈，你可以继续完善，不过你要告诉我，我也学习一下！）

/*
 * 实现动画的步骤:
 1.怎样得到当前的样式  封装一个函数 getStyle()
 2.步长的计算  用(目标位置 - 当前的样式) / 10
 3. 缓动动画原理:  盒子本身的样式 + 步长(不断变化的)
 */
/*
 * css设置透明度，一般在ie中用的是filter:alpha(opacity=0);
而在firefox中，一般就是直接使用opacity:0
*/
// 多个属性的运动框架 以及添加回调函数
function animate(obj,json,fn){  // 目标obj   json 属性：属性值  fn回调函数
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;// 用来判断是否停止定时器  
        // 遍历json
        for (var attr in json) {  //attr 属性  json[attr]值
            var curStyle = 0;
            if (attr == "opacity") {
                curStyle = parseInt(getStyle(obj,attr)*100);
            } else{
                curStyle = parseInt(getStyle(obj,attr));// 获得数值
            }
            // 得到步长  目标位置就是json[attr]
            var step = (json[attr]-curStyle) / 10;
            step = step > 0 ? Math.ceil(step) :Math.floor(step);

            // 判断透明度
            if (attr == "opacity") { // 判断用户有没有输入opacity
                if ("opacity" in obj.style) { 
                    obj.style.opacity = (curStyle + step) / 100;
                } else{
                    obj.style.filter = "alpha(opacity="+(curStyle +step)+")";
                }

            } else if(attr == "zIndex"){
                obj.style.zIndex = json[attr];
            } else{
                obj.style[attr] = curStyle +step +"px";
            }
            // 判断是否已经都到了目标位置   只要其中一个不满足条件 就不应该停止定时器
            if (curStyle != json[attr]) {
                flag = false;
            }
        }
        // 判断定时器条件 是否该停止了
        if (flag) {
            clearInterval(obj.timer)
            // 当定时器停止后，动画也就结束了.如果有回调函数就执行回调函数
            if(fn){
                fn();
            }

        }
    },30);
}

// 封装函数 得到属性
function getStyle(obj,attr) {  //  谁的      那个属性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
    }
}

接着我们在js里面引入我们写的框架

<script src="animate.js"></script>

接下来，写js代码

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

好啦，这样就完成了，具体效果你自己动手看看吧。完整的下载地址为
js版本的手风琴效果

写完了js，发现代码量好多啊，看看jquery代码，哦买嘎，切记一定要先引入jQuery的包，再写代码哈！

<script src="jquery-1.11.1.min.js"></script>
        <script>
            $(function(){
                $("#box li").each(function(index,ele){
                    $(ele).css("background","url(images/"+(index+1)+".jpg)");
                }).mouseenter(function(){
                    $(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);
                }).mouseleave(function(){
                    $("#box li").stop().animate({width:240},500);
                });
            });

        </script>

精简了好多。
来吧，我们的jQuery版本手风琴效果下载地址