看到這種什么百葉窗的動畫，以為都是flash實現(xiàn)的，最近突然靈光一閃，想到了用js實現(xiàn)（雖然我不是做前端的，本人做.net）。代碼雖然實現(xiàn)了，但是比較亂，先上個圖：

一個js的動畫，以前以為只有flash可以實現(xiàn)

代碼主要就是一些數(shù)學的計算，然后結合html，css打造出類似flash的效果。

下面貼出主要的部分代碼：

function all(books){

for(var i=;i<self.rows;i++) {

for (var j = ; j < self.columns; j++) {

if(!books[i][j])return false;

}

}

return true;

}

function resetBooks(books){

for(var i=;i<self.rows;i++) {

for (var j = ; j < self.columns; j++) {

books[i][j]=false;

}

}

return true;

}

var self=this,timer=null,_iindex= ;

var initdir=[[[,],[,]],[[-,],[,]],[[,-],[-,]],[[,-],[,]],[[,-],[,],[,],[-,]]],dir=initdir[];

var weight=[,,,,];

var initpos=[[{x:,y:-}],[{x:self.columns-,y:-}],[{x:self.columns-,y:self.rows}],[{x:,y:self.rows}],[{x:self.columns/,y:self.rows/}]];

timer=setInterval(function(){

var n=[];

for(var i=;i<self.preDivs.length;i++){

var _div=null,x= ,y=;

for(var j=;j<dir.length;j++){

x=self.preDivs[i].x+dir[j][];

y=self.preDivs[i].y+dir[j][];

if(x>=&&y>=&&x<self.columns&&y<self.rows&&!self.books[y][x]){

self.books[y][x]=true;

_div=self.zzDivStatck[y][x];

n.push({x:x,y:y});

_div.style.backgroundImage = "url(" + self.zzImages[_iindex] + ")";

_div.style.backgroundPositionX = (-x * self.zzDivW) + "px ";

_div.style.backgroundPositionY = (-y * self.zzDivH) + "px";

}

}

}

self.preDivs=n;

if(all(self.books)){

resetBooks(self.books);

var _r=util.randomWeight(weight);

self.preDivs = initpos[_r];

dir=initdir[_r];

_iindex++;

}

if(_iindex>=+self.zzImages.length){

_iindex=;

}

},);

以上代碼是使用javascript實現(xiàn)的百葉窗動畫效果，希望對大家有所幫助！