浦口区网站建设质量推荐,做视频网站投入要多少,网页制作网站花店,东坡区建设局网站11年刚干这行的时候#xff0c;看到这种什么百叶窗的动画#xff0c;以为都是flash实现的#xff0c;最近突然灵光一闪#xff0c;想到了用js实现#xff08;虽然我不是做前端的#xff0c;本人做.net#xff09;。代码虽然实现了#xff0c;但是比较乱#xff0c;先上…11年刚干这行的时候看到这种什么百叶窗的动画以为都是flash实现的最近突然灵光一闪想到了用js实现虽然我不是做前端的本人做.net。代码虽然实现了但是比较乱先上个图 代码主要就是一些数学的计算然后结合htmlcss打造出类似flash的效果。 下面贴出主要的部分代码 1 function all(books){2 for(var i0;iself.rows;i) {3 for (var j 0; j self.columns; j) {4 if(!books[i][j])return false;5 }6 }7 return true;8 }9 function resetBooks(books){
10 for(var i0;iself.rows;i) {
11 for (var j 0; j self.columns; j) {
12 books[i][j]false;
13 }
14 }
15 return true;
16 }
17 var selfthis,timernull,_iindex 0;
18 var initdir[[[0,1],[1,0]],[[-1,0],[0,1]],[[0,-1],[-1,0]],[[0,-1],[1,0]],[[0,-1],[1,0],[0,1],[-1,0]]],dirinitdir[0];
19 var weight[1,1,1,1,6];
20 var initpos[[{x:0,y:-1}],[{x:self.columns-1,y:-1}],[{x:self.columns-1,y:self.rows}],[{x:0,y:self.rows}],[{x:self.columns/2,y:self.rows/2}]];
21 timersetInterval(function(){
22 var n[];
23 for(var i0;iself.preDivs.length;i){
24 var _divnull,x 0,y0;
25 for(var j0;jdir.length;j){
26 xself.preDivs[i].xdir[j][0];
27 yself.preDivs[i].ydir[j][1];
28 if(x0y0xself.columnsyself.rows!self.books[y][x]){
29 self.books[y][x]true;
30 _divself.zzDivStatck[y][x];
31 n.push({x:x,y:y});
32 _div.style.backgroundImage url( self.zzImages[_iindex] );
33 _div.style.backgroundPositionX (-x * self.zzDivW) px ;
34 _div.style.backgroundPositionY (-y * self.zzDivH) px;
35 }
36 }
37
38 }
39
40 self.preDivsn;
41 if(all(self.books)){
42 resetBooks(self.books);
43 var _rutil.randomWeight(weight);
44 self.preDivs initpos[_r];
45 dirinitdir[_r];
46 _iindex;
47 }
48 if(_iindexself.zzImages.length){
49 _iindex0;
50 }
51
52 },100); View Code 源码附上http://files.cnblogs.com/files/csbt/DDZ.zip转载于:https://www.cnblogs.com/csbt/p/byc.html
