百叶窗动画思路

来源：互联网发布：origin软件多少钱编辑：程序博客网时间：2024/04/24 23:27

相信大家都见过百叶窗动画效果，那么我就简单的给大家介绍一下这个百叶窗的动画效果是怎么实现的
首先我们要创建一个大的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)    }

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

0 0