看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net)。代码虽然实现了,但是比较乱,先上个图:

基于JavaScript实现百叶窗动画效果不只单纯flas可以实现

  一个js的动画,以前以为只有flash可以实现

代码主要就是一些数学的计算,然后结合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实现的百叶窗动画效果,希望对大家有所帮助!

标签:
js动画

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。