百叶窗动画思路

相信大家都见过百叶窗动画效果，那么我就简单的给大家介绍一下这个百叶窗的动画效果是怎么 实现的
首先 我们要创建一个大的div来承载我们切图后的小div
我觉得 百叶窗的难点就难在 如何将一张大于切割成若干的小图
在切割图片之前 我们要先确认好切割多少张

    var col = 10;//定义切割的列数
    var rows = 4;//定义切割的行数

然后再进行循环 创建DIV 最好是先创建一个文档碎片用来保存 所创建的DIV 已减少添加到容器中回流的次数 减少性能消耗（关于回流重绘 可以在我博客里面找专题，这里我就不细说了）

var a=[];
    var frg=document.createDocumentFragment();
    for(var i=0;i<col*rows;i++){
        var oDiv=document.createElement("div");
        var w=box.offsetWidth;
        var h=box.offsetHeight;
        with(oDiv.style){
            width=w/col+"px";//定义每个DIV的宽度
            height=h/rows+"px";//定义每个div的高度
            var l=i%col*(w/col);//切图的位置
            left=-900+"px";//藏住div
            oDiv.l=l;
            var h=Math.floor(i/col)*(h/rows);
            top=200+"px";
            oDiv.h=h;
            backgroundPosition="-"+l+"px -"+h+"px"
        }
        frg.appendChild(oDiv)
        a.push(oDiv)
    }
    box.appendChild(frg);

创建好这些小的div 之后就可以让其动起来了 可以用我先前写好的tween动画库
就可以达到 百叶窗的效果了
简单的代码如下

var oDivs=box.getElementsByTagName("div");
    for(var i=0;i< a.length;i++){
        ;(function(i){
            window.setTimeout(function(){
                animate(oDivs[i],{left:oDivs[i].l,top:oDivs[i].h},200,['Back','easeInOut'])
            },400*(i%col))
        })(i)
    }

这样就一个简单的百叶窗动画就完成了，如何循环播放 ，个位看官可以自己摸索，我就不上代码了