超厉害的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-100if(!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);elseUtils.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(