js特效01手风琴动态效果案例

思路分析：1给ul中的每一个li动态添加背景图。2排他干掉所有人并且鼠标经过改变所有图片宽度，留下我自己 鼠标经过改变当前图片宽度3鼠标离开后图片宽度还原

 var box=document.getElementById('box');
    var ul=box.children[0];
    var lis=ul.children;
    //动态添加背景图
for (var i = 0; i < lis.length; i++) {
    lis[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";

 lis[i].onmouseover=function(){
//干掉所有人 并且鼠标经过 图片宽度变成240
for (var j= 0; j < lis.length; j++) {
   animate( lis[j], {"width": 100});

}
//留下我自己 鼠标经过当前图片 宽度变成800
   animate( this, {"width": 800});
    }
}
//鼠标离开后，所有的li都变成240
box.onmouseout=function(){
    for (var i = 0; i < lis.length; i++) {
    animate(lis[i], {"width": 240});

    }
}
//暂用半成品的封装函数