超厉害的CSS3图片破碎爆炸效果！

2024-04-27 14:18:47

字体：大中小

来源：转载

供稿：网友

超厉害的CSS3图片破碎爆炸效果！

java代码

varfx={
buffer:function(obj,cur,target,fnDo,fnEnd,fs){
if(!fs)fs=6;
varnow={};
varx=0;
varv=0;
if(!obj.__last_timer)obj.__last_timer=0;
vart=newDate().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove,20);
functionfnMove(){
v=Math.ceil((100-x)/fs);
x+=v;
for(variincur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj,now);
if(Math.abs(v)<1&&Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj,target);
}
}
},
flex:function(obj,cur,target,fnDo,fnEnd,fs,ms){
varMAX_SPEED=16;
if(!fs)fs=6;
if(!ms)ms=0.75;
varnow={};
varx=0;//0-100
if(!obj.__flex_v)obj.__flex_v=0;
if(!obj.__last_timer)obj.__last_timer=0;
vart=newDate().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove,20);
functionfnMove(){
obj.__flex_v+=(100-x)/fs;
obj.__flex_v*=ms;
if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;
x+=obj.__flex_v;
for(variincur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj,now);
if(Math.abs(obj.__flex_v)<1&&Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj,target);
obj.__flex_v=0;
}
}
},
linear:function(obj,cur,target,fnDo,fnEnd,fs){
if(!fs)fs=50;
varnow={};
varx=0;
varv=0;
if(!obj.__last_timer)obj.__last_timer=0;
vart=newDate().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove,20);
v=100/fs;
functionfnMove(){
x+=v;
for(variincur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj,now);
if(Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj,target);
}
}
},
stop:function(obj){
clearInterval(obj.timer);
},
move3:function(obj,json,fnEnd,fTime,sType){
varaddEnd=fx.addEnd;
fTime||(fTime=1);
sType||(sType='ease');
setTimeout(function(){
Utils.setStyle3(obj,'transition',sPRintf('%1sall%2',fTime,sType));
addEnd(obj,function(){
Utils.setStyle3(obj,'transition','none');
if(fnEnd)fnEnd.apply(obj,arguments);
},json);
setTimeout(function(){
if(typeofjson=='function')
json.call(obj);
else
Utils.setStyle(obj,json);
},0);
},0);
}
};
//监听css3运动终止
(function(){
varaListener=[];//{obj,fn,arg}
if(!Modernizr.csstransitions)return;
if(window.navigator.userAgent.toLowerCase().search('webkit')!=-1)
{
document.addEventListener('webkitTransitionEnd',endListrner,false);
}
else
{
document.addEventListener('transitionend',endListrner,false);
}
functionendListrner(ev)
{
varoEvObj=ev.srcElement||ev.target;
//alert(aListener.length);
for(vari=0;i<aListener.length;i++)
{
if(oEvObj==aListener[i].obj)
{
aListener[i].fn.call(aListener[i].obj,aListener[i].arg);
aListener.remove(aListener[i--]);
}
}
}
fx.addEnd=function(obj,fn,arg)
{
if(!obj||!fn)return;
aListener.push({obj:obj,fn:fn,arg:arg});
}
})();
$(function(){
varnow=0;
varready=true;
varW=700;
varH=400;
var$img=$("#img");
varoDiv=$img.get(0);
varnext=function(){
return(now+1)%3;
}
//爆炸
$("#btn_explode").on("click",function(){
if(!ready)return;
ready=false;
varR=4;
varC=7;
varcw=W/2;
varch=H/2;
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg)centerno-repeat';
varaData=[];
varwait=R*C;
for(vari=0;i<R;i++){
for(varj=0,k=0;j<C;j++,k++)
{
aData[i]={left:W*j/C,top:H*i/R};
varoNewDiv=$('<div>');
oNewDiv.css({
position:'absolute',
width:Math.ceil(W/C)+'px',
height:Math.ceil(H/R)+'px',
background:'url(images/'+(now+1)+'.jpg)'+-aData[i].left+'px'+-aData[i].top+'pxno-repeat',
left:aData[i].left+'px',
top:aData[i].top+'px'
});
oDiv.appendChild(oNewDiv[0]);
varl=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C);
vart=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R);
setTimeout((function(oNewDiv,l,t){
returnfunction()
{
fx.buffer(
oNewDiv,
{left:oNewDiv.offsetLeft,
top:oNewDiv.offsetTop,
opacity:100,
x:0,
y:0,
z:0,
scale:1,
a:0
},
{left:l,
top:t,
opacity:0,
x:Utils.rnd(-180,180),
y:Utils.rnd(-180,180),
z:Utils.rnd(-180,180),
scale:Utils.rnd(1.5,3),
a:1
},
function(now){
this.style.left=now.left+'px';
this.style.top=now.top+'px';
this.style.opacity=now.opacity/100;
Utils.setStyle3(oNewDiv,'transform','perspective(500px)rotateX('+now.x+'deg)rotateY('+now.y+'deg)rotateZ('+now.z+'deg)scale('+now.scale+')');
},function(){
setTimeout(function(){
oDiv.removeChild(oNewDiv);
},200);
if(--wait==0)
{
ready=true;
now=next();
}
},10
);
};
})(oNewDiv[0],l,t),Utils.rnd(0,200));
}
}
});
//翻转
$("#btn_tile").on("click",function(){
if(!ready)return;
ready=false;
varR=3;
varC=6;
varwait=R*C;
vardw=Math.ceil(W/C);
vardh=Math.ceil(H/R);
oDiv.style.background='none';
oDiv.innerHTML='';
for(vari=0;i<C;i++)
{
for(varj=0;j<R;j++)
{
varoNewDiv=document.createElement('div');
vart=Math.ceil(H*j/R);
varl=Math.ceil(W*i/C);
Utils.setStyle(oNewDiv,{
position:'absolute',background:'url(images/'+(now+1)+'.jpg)'+-l+'px'+-t+'pxno-repeat',
left:l+'px',top:t+'px',width:dw+'px',height:dh+'px'
});
(function(oNewDiv,l,t){
oNewDiv.ch=false;
setTimeout(function(){
fx.linear(oNewDiv,{y:0},{y:180},function(now){
if(now.y>90&&!oNewDiv.ch)
{
oNewDiv.ch=true;
oNewDiv.style.background='url(images/'+(next()+1)+'.jpg)'+-l+'px'+-t+'pxno-repeat';
}
if(now.y>90)
{
Utils.setStyle3(oNewDiv,'transform','perspective(500px)rotateY('+now.y+'deg)scale(-1,1)');
}
else
{
Utils.setStyle3(