《基于JavaScript实现百叶窗动画效果不只单纯flas可以实现_.docx》由会员分享，可在线阅读，更多相关《基于JavaScript实现百叶窗动画效果不只单纯flas可以实现_.docx（4页珍藏版）》请在三一文库上搜索。
1、基于JavaScript实现百叶窗动画效果不只单纯flas可以实现_ 看到这种什么百叶窗的动画，以为都是flash实现的，最近突然灵光一闪，想到了用js实现（虽然我不是做前端的，本人做.net）。代码虽然实现了，但是比较乱，先上个图： 一个js的动画，以前以为只有flash可以实现 代码主要就是一些数学的计算，然后结合html，css打造出类似flash的效果。 下面贴出主要的部分代码： function all(books) for(var i=;iself.rows;i+) for (var j = ; j self.columns; j+) if(!booksij)return fals
2、e; return true; function resetBooks(books) for(var i=;iself.rows;i+) for (var j = ; j self.columns; j+) booksij=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.row
3、s,x:self.columns/,y:self.rows/; timer=setInterval(function() var n=; for(var i=;iself.preDivs.length;i+) var _div=null,x= ,y=; for(var j=;jdir.length;j+) x=self.preDivsi.x+dirj; y=self.preDivsi.y+dirj; if(x=y=xself.columnsyself.rows!self.booksyx) self.booksyx=true; _div=self.zzDivStatckyx; n.push(x:
4、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实现的百叶窗动画效果，盼望对大家有所关心！ .