首页 > 代码库 > 超厉害的CSS3图片破碎爆炸效果！

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

2024-07-24 12:04:11   222人阅读

Java代码  收藏代码
  1. var fx  = {  
  2.     buffer : function(obj, cur, target, fnDo, fnEnd, fs){  
  3.         if(!fs)fs=6;  
  4.         var now={};  
  5.         var x=0;  
  6.         var v=0;  
  7.           
  8.         if(!obj.__last_timer)obj.__last_timer=0;  
  9.         var t=new Date().getTime();  
  10.         if(t-obj.__last_timer>20)  
  11.         {  
  12.             fnMove();  
  13.             obj.__last_timer=t;  
  14.         }  
  15.           
  16.         clearInterval(obj.timer);  
  17.         obj.timer=setInterval(fnMove, 20);  
  18.         function fnMove(){  
  19.             v=Math.ceil((100-x)/fs);              
  20.             x+=v;             
  21.             for(var i in cur)  
  22.             {  
  23.                 now[i]=(target[i]-cur[i])*x/100+cur[i];  
  24.             }                         
  25.             if(fnDo)fnDo.call(obj, now);  
  26.               
  27.             if(Math.abs(v)<1 && Math.abs(100-x)<1)  
  28.             {  
  29.                 clearInterval(obj.timer);  
  30.                 if(fnEnd)fnEnd.call(obj, target);  
  31.             }  
  32.         }  
  33.     },  
  34.       
  35.     flex : function(obj, cur, target, fnDo, fnEnd, fs, ms){  
  36.         var MAX_SPEED=16;  
  37.           
  38.         if(!fs)fs=6;  
  39.         if(!ms)ms=0.75;  
  40.         var now={};  
  41.         var x=0;    //0-100  
  42.           
  43.         if(!obj.__flex_v)obj.__flex_v=0;  
  44.           
  45.         if(!obj.__last_timer)obj.__last_timer=0;  
  46.         var t=new Date().getTime();  
  47.         if(t-obj.__last_timer>20)  
  48.         {  
  49.             fnMove();  
  50.             obj.__last_timer=t;  
  51.         }  
  52.           
  53.         clearInterval(obj.timer);  
  54.         obj.timer=setInterval(fnMove, 20);  
  55.           
  56.         function fnMove(){  
  57.             obj.__flex_v+=(100-x)/fs;  
  58.             obj.__flex_v*=ms;  
  59.   
  60.             if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;  
  61.               
  62.             x+=obj.__flex_v;  
  63.               
  64.             for(var i in cur)  
  65.             {  
  66.                 now[i]=(target[i]-cur[i])*x/100+cur[i];  
  67.             }  
  68.               
  69.               
  70.             if(fnDo)fnDo.call(obj, now);  
  71.               
  72.             if(Math.abs(obj.__flex_v)<1 && Math.abs(100-x)<1)  
  73.             {  
  74.                 clearInterval(obj.timer);  
  75.                 if(fnEnd)fnEnd.call(obj, target);  
  76.                 obj.__flex_v=0;  
  77.             }  
  78.         }  
  79.     },  
  80.     linear : function (obj, cur, target, fnDo, fnEnd, fs){  
  81.         if(!fs)fs=50;  
  82.         var now={};  
  83.         var x=0;  
  84.         var v=0;  
  85.           
  86.         if(!obj.__last_timer)obj.__last_timer=0;  
  87.         var t=new Date().getTime();  
  88.         if(t-obj.__last_timer>20)  
  89.         {  
  90.             fnMove();  
  91.             obj.__last_timer=t;  
  92.         }  
  93.           
  94.         clearInterval(obj.timer);  
  95.         obj.timer=setInterval(fnMove, 20);  
  96.           
  97.         v=100/fs;  
  98.         function fnMove(){  
  99.             x+=v;  
  100.               
  101.             for(var i in cur)  
  102.             {  
  103.                 now[i]=(target[i]-cur[i])*x/100+cur[i];  
  104.             }  
  105.               
  106.             if(fnDo)fnDo.call(obj, now);  
  107.               
  108.             if(Math.abs(100-x)<1)  
  109.             {  
  110.                 clearInterval(obj.timer);  
  111.                 if(fnEnd)fnEnd.call(obj, target);  
  112.             }  
  113.         }  
  114.     },  
  115.       
  116.     stop:function (obj){  
  117.         clearInterval(obj.timer);  
  118.     },  
  119.       
  120.     move3 : function(obj, json, fnEnd, fTime, sType){  
  121.         var addEnd=fx.addEnd;  
  122.           
  123.         fTime||(fTime=1);  
  124.         sType||(sType=‘ease‘);  
  125.           
  126.         setTimeout(function (){  
  127.             Utils.setStyle3(obj, ‘transition‘, sprintf(‘%1s all %2‘, fTime, sType));  
  128.             addEnd(obj, function (){  
  129.                 Utils.setStyle3(obj, ‘transition‘, ‘none‘);  
  130.                 if(fnEnd)fnEnd.apply(obj, arguments);  
  131.             }, json);  
  132.               
  133.             setTimeout(function (){  
  134.                 if(typeof json==‘function‘)  
  135.                     json.call(obj);  
  136.                 else  
  137.                     Utils.setStyle(obj, json);  
  138.             }, 0);  
  139.         }, 0);  
  140.       
  141.     }  
  142.   
  143. };  
  144.   
  145. //监听css3运动终止  
  146. (function (){  
  147.     var aListener=[];   //{obj, fn, arg}  
  148.     if(!Modernizr.csstransitions)return;      
  149.     if(window.navigator.userAgent.toLowerCase().search(‘webkit‘)!=-1)  
  150.     {  
  151.         document.addEventListener(‘webkitTransitionEnd‘, endListrner, false);  
  152.     }  
  153.     else  
  154.     {  
  155.         document.addEventListener(‘transitionend‘, endListrner, false);  
  156.     }  
  157.       
  158.     function endListrner(ev)  
  159.     {  
  160.         var oEvObj=ev.srcElement||ev.target;  
  161.         //alert(aListener.length);  
  162.         for(var i=0;i<aListener.length;i++)  
  163.         {  
  164.             if(oEvObj==aListener[i].obj)  
  165.             {  
  166.                 aListener[i].fn.call(aListener[i].obj, aListener[i].arg);  
  167.                 aListener.remove(aListener[i--]);  
  168.             }  
  169.         }  
  170.     }  
  171.       
  172.     fx.addEnd=function (obj, fn, arg)  
  173.     {  
  174.         if(!obj || !fn)return;  
  175.         aListener.push({obj: obj, fn: fn, arg: arg});  
  176.     }  
  177. })();  
  178.   
  179. $(function(){  
  180.     var now=0;  
  181.     var ready=true;  
  182.     var W=700;  
  183.     var H=400;    
  184.     var $img = $("#img");     
  185.     var oDiv = $img.get(0);  
  186.     var next =function(){  
  187.         return (now+1)%3;  
  188.     }  
  189.     //爆炸  
  190.     $("#btn_explode").on("click",function(){  
  191.           
  192.         if(!ready)return;  
  193.         ready=false;  
  194.               
  195.         var R=4;  
  196.         var C=7;          
  197.         var cw=W/2;  
  198.         var ch=H/2;  
  199.           
  200.         oDiv.innerHTML=‘‘;  
  201.         oDiv.style.background=‘url(images/‘+(next()+1)+‘.jpg) center no-repeat‘;  
  202.         var aData=http://www.mamicode.com/[];
  203.           
  204.         var wait=R*C;  
  205.           
  206.         for(var i=0;i<R;i++){  
  207.             for(var j=0,k=0;j<C;j++,k++)  
  208.             {  
  209.                 aData[i]={left: W*j/C, top: H*i/R};  
  210.                 var oNewDiv=$(‘<div>‘);  
  211.                 oNewDiv.css({  
  212.                     position: ‘absolute‘,                     
  213.                     width:Math.ceil(W/C)+‘px‘,   
  214.                     height: Math.ceil(H/R)+‘px‘,  
  215.                     background: ‘url(images/‘+(now+1)+‘.jpg) ‘+-aData[i].left+‘px ‘+-aData[i].top+‘px no-repeat‘,                     
  216.                     left: aData[i].left+‘px‘,  
  217.                     top: aData[i].top+‘px‘    
  218.                 });  
  219.   
  220.                                   
  221.                 oDiv.appendChild(oNewDiv[0]);  
  222.                   
  223.                 var l=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C);  
  224.                 var t=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R);  
  225.                   
  226.                 setTimeout((function (oNewDiv,l,t){  
  227.                     return function ()  
  228.                     {  
  229.                         fx.buffer(  
  230.                             oNewDiv,  
  231.                             {   left: oNewDiv.offsetLeft,   
  232.                                 top: oNewDiv.offsetTop  ,  
  233.                                 opacity: 100,  
  234.                                 x:0,  
  235.                                 y:0,  
  236.                                 z:0,  
  237.                                 scale:1,  
  238.                                 a:0  
  239.                             },  
  240.                             {   left: l,  
  241.                                 top: t,  
  242.                                 opacity: 0,  
  243.                                 x:Utils.rnd(-180, 180),  
  244.                                 y:Utils.rnd(-180, 180),  
  245.                                 z:Utils.rnd(-180, 180),  
  246.                                 scale:Utils.rnd(1.5, 3),  
  247.                                 a:1  
  248.                             },  
  249.                             function (now){                               
  250.                                 this.style.left=now.left+‘px‘;  
  251.                                 this.style.top=now.top+‘px‘;  
  252.                                 this.style.opacity=now.opacity/100;  
  253.                                 Utils.setStyle3(oNewDiv, ‘transform‘, ‘perspective(500px) rotateX(‘+now.x+‘deg) rotateY(‘+now.y+‘deg) rotateZ(‘+now.z+‘deg) scale(‘+now.scale+‘)‘);  
  254.                             }, function (){  
  255.                                 setTimeout(function (){  
  256.                                     oDiv.removeChild(oNewDiv);  
  257.                                 }, 200);  
  258.                                 if(--wait==0)  
  259.                                 {  
  260.                                     ready=true;  
  261.                                     now=next();  
  262.                                 }  
  263.                             }, 10  
  264.                         );  
  265.                     };  
  266.                 })(oNewDiv[0],l,t), Utils.rnd(0, 200));  
  267.             }  
  268.         }  
  269.       
  270.       
  271.     });  
  272.       
  273.       
  274.       
  275.       
  276.     //翻转  
  277.       
  278.     $("#btn_tile").on("click",function(){  
  279.         if(!ready)return;  
  280.         ready=false;  
  281.           
  282.         var R=3;  
  283.         var C=6;  
  284.           
  285.         var wait=R*C;  
  286.           
  287.         var dw=Math.ceil(W/C);  
  288.         var dh=Math.ceil(H/R);  
  289.           
  290.         oDiv.style.background=‘none‘;  
  291.         oDiv.innerHTML=‘‘;  
  292.           
  293.         for(var i=0;i<C;i++)  
  294.         {  
  295.             for(var j=0;j<R;j++)  
  296.             {  
  297.                 var oNewDiv=document.createElement(‘div‘);  
  298.                 var t=Math.ceil(H*j/R);  
  299.                 var l=Math.ceil(W*i/C);  
  300.                   
  301.                 Utils.setStyle(oNewDiv, {  
  302.                     position: ‘absolute‘, background: ‘url(images/‘+(now+1)+‘.jpg) ‘+-l+‘px ‘+-t+‘px no-repeat‘,  
  303.                     left: l+‘px‘, top: t+‘px‘, width: dw+‘px‘, height: dh+‘px‘  
  304.                 });  
  305.                   
  306.                 (function (oNewDiv, l, t){  
  307.                     oNewDiv.ch=false;  
  308.                       
  309.                     setTimeout(function (){  
  310.                         fx.linear(oNewDiv, {y:0}, {y:180}, function (now){  
  311.                             if(now.y>90 && !oNewDiv.ch)  
  312.                             {  
  313.                                 oNewDiv.ch=true;  
  314.                                 oNewDiv.style.background=‘url(images/‘+(next()+1)+‘.jpg) ‘+-l+‘px ‘+-t+‘px no-repeat‘;  
  315.                             }  
  316.                               
  317.                             if(now.y>90)  
  318.                             {  
  319.                                 Utils.setStyle3(oNewDiv, ‘transform‘, ‘perspective(500px) rotateY(‘+now.y+‘deg) scale(-1,1)‘);  
  320.                             }  
  321.                             else  
  322.                             {  
  323.                                 Utils.setStyle3(oNewDiv, ‘transform‘, ‘perspective(500px) rotateY(‘+now.y+‘deg)‘);  
  324.                             }  
  325.                         }, function (){  
  326.                             if((--wait)==0)  
  327.                             {  
  328.                                 ready=true;  
  329.                                 now=next();  
  330.                             }  
  331.                         }, 22);  
  332.                     }, /*(i+j*R)*120*/(i+j)*200);  
  333.                 })(oNewDiv, l, t);  
  334.                   
  335.                 oDiv.appendChild(oNewDiv);  
  336.             }  
  337.         }  
  338.       
  339.       
  340.     });  
  341.       
  342.       
  343.       
  344.     //扭曲  
  345.     $("#btn_bars").on("click",function(){  
  346.         if(!ready)return;  
  347.         ready=false;  
  348.         var C=7;  
  349.           
  350.         var wait=C;  
  351.           
  352.         var dw=Math.ceil(W/C);  
  353.           
  354.         oDiv.style.background=‘none‘;  
  355.         oDiv.innerHTML=‘‘;  
  356.           
  357.         for(var i=0;i<C;i++)  
  358.         {  
  359.             var oNewDiv=document.createElement(‘div‘);  
  360.               
  361.             Utils.setStyle(oNewDiv, {  
  362.                 width: dw+‘px‘, height: ‘100%‘, position: ‘absolute‘, left: W*i/C+‘px‘, top: 0  
  363.             });  
  364.             Utils.setStyle3(oNewDiv, ‘transformStyle‘, ‘preserve-3d‘);  
  365.             Utils.setStyle3(oNewDiv, ‘transform‘, ‘perspective(1000px) rotateX(0deg)‘);  
  366.             //setStyle3(oNewDiv, ‘transition‘, ‘0.5s all linear‘);  
  367.               
  368.             (function (oNewDiv,i){  
  369.                 oNewDiv.style.zIndex=C/2-Math.abs(i-C/2);  
  370.                   
  371.                 setTimeout(function (){  
  372.                     fx.buffer(oNewDiv, {a:0, x:0}, {a:100, x:-90}, function (now){  
  373.                         Utils.setStyle3(oNewDiv, ‘transform‘, ‘perspective(1000px) rotateY(‘+((3*(i-C/2))*(50-Math.abs(now.a-50))/50)+‘deg) rotateX(‘+now.x+‘deg)‘);  
  374.                     }, function (){  
  375.                         if(--wait==0)  
  376.                         {  
  377.                             ready=true;  
  378.                         }  
  379.                         now=next();  
  380.                     }, 8);  
  381.                     //setStyle3(oNewDiv, ‘transform‘, ‘perspective(1000px) rotateY(‘+3*(i-C/2)+‘deg) rotateX(-45deg)‘);  
  382.                 }, (i+1)*130);  
  383.             })(oNewDiv,i);  
  384.               
  385.             oNewDiv.innerHTML=‘<div></div><div></div><div></div><div></div>‘;  
  386.               
  387.             var oNext=oNewDiv.getElementsByTagName(‘div‘)[0];  
  388.             var oNow=oNewDiv.getElementsByTagName(‘div‘)[1];  
  389.             var oBack=oNewDiv.getElementsByTagName(‘div‘)[2];  
  390.             var oBack2=oNewDiv.getElementsByTagName(‘div‘)[3];  
  391.               
  392.             Utils.setStyle([oNext, oNow, oBack, oBack2], {width: ‘100%‘, height: ‘100%‘, position: ‘absolute‘, left: 0, top: 0});  
  393.             Utils.setStyle(oNext, {  
  394.                 background: ‘url(images/‘+(next()+1)+‘.jpg) ‘+-W*i/C+‘px 0px no-repeat‘  
  395.             });  
  396.             Utils.setStyle3(oNext, ‘transform‘, ‘scale3d(0.836,0.836,0.836) rotateX(90deg) translateZ(‘+H/2+‘px)‘);  
  397.               
  398.             Utils.setStyle(oNow, {  
  399.                 background: ‘url(images/‘+(now+1)+‘.jpg) ‘+-W*i/C+‘px 0px no-repeat‘  
  400.             });  
  401.             Utils.setStyle3(oNow, ‘transform‘, ‘scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ(‘+H/2+‘px)‘);  
  402.               
  403.             Utils.setStyle(oBack, {  
  404.                 background: ‘#666‘  
  405.             });  
  406.             Utils.setStyle3(oBack, ‘transform‘, ‘scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ(-‘+H/2+‘px)‘);  
  407.               
  408.             Utils.setStyle(oBack2, {  
  409.                 background: ‘#666‘  
  410.             });  
  411.             Utils.setStyle3(oBack2, ‘transform‘, ‘scale3d(0.834,0.834,0.834) rotateX(90deg) translateZ(-‘+H/2+‘px)‘);  
  412.               
  413.             oDiv.appendChild(oNewDiv);  
  414.         }  
  415.       
  416.       
  417.     });  
  418.       
  419.       
  420.     //立方体  
  421.     $("#btn_cube").on("click",function(){  
  422.         if(!ready)return;  
  423.         ready=false;  
  424.           
  425.         oDiv.innerHTML=‘‘;  
  426.         oDiv.style.background=‘none‘;  
  427.                       
  428.         Utils.setStyle3(oDiv, ‘transformStyle‘, ‘preserve-3d‘);  
  429.         Utils.setStyle3(oDiv, ‘transform‘, ‘perspective(1000px) rotateY(0deg)‘);  
  430.           
  431.         var oNow=document.createElement(‘div‘);  
  432.         var oNext=document.createElement(‘div‘);  
  433.           
  434.         Utils.setStyle([oNow, oNext], {  
  435.             position: ‘absolute‘,  
  436.             width: ‘100%‘,   
  437.             height: ‘100%‘,   
  438.             left: 0,  
  439.             top: 0  
  440.         });  
  441.           
  442.         Utils.setStyle3(oNow, ‘transform‘, ‘scale3d(0.741,0.741,0.741) rotate3d(0,1,0,0deg) translate3d(0,0,‘+W/2+‘px)‘);  
  443.         Utils.setStyle3(oNext, ‘transform‘, ‘scale3d(0.741,0.741,0.741) rotate3d(0,1,0,90deg) translate3d(0,0,‘+W/2+‘px)‘);  
  444.           
  445.         oDiv.appendChild(oNext);  
  446.         oDiv.appendChild(oNow);  
  447.           
  448.         oNow.style.background=‘url(images/‘+(now+1)+‘.jpg) center no-repeat‘;  
  449.         oNext.style.background=‘url(images/‘+(next()+1)+‘.jpg) center no-repeat‘;  
  450.         //return;  
  451.         setTimeout(function (){  
  452.             //setStyle3(oDiv, ‘transition‘, ‘1s all ease-in-out‘);  
  453.             fx.flex(oDiv, {y:0}, {y:-90}, function (now){  
  454.                 Utils.setStyle3(oDiv, ‘transform‘, ‘perspective(1000px) rotateY(‘+now.y+‘deg)‘);  
  455.             }, function (){  
  456.                 Utils.setStyle3(oDiv, ‘transition‘, ‘none‘);  
  457.                 Utils.setStyle3(oDiv, ‘transformStyle‘, ‘flat‘);  
  458.                 Utils.setStyle3(oDiv, ‘transform‘, ‘none‘);  
  459.                   
  460.                 oDiv.innerHTML=‘‘;  
  461.                 oDiv.style.background=‘url(images/‘+(next()+1)+‘.jpg) center no-repeat‘;  
  462.                   
  463.                 now=next();  
  464.                   
  465.                 ready=true;  
  466.             }, 10, 0.6);  
  467.         },0);  
  468.       
  469.     });  
  470.       
  471.     //翻页  
  472.     $("#btn_turn").on("click",function(){  
  473.           
  474.         if(!ready)return;  
  475.         ready=false;  
  476.           
  477.         oDiv.innerHTML=‘‘;  
  478.         oDiv.style.background=‘url(images/‘+(next()+1)+‘.jpg) center no-repeat‘;  
  479.           
  480.         var oDivPage=document.createElement(‘div‘);  
  481.           
  482.         Utils.setStyle(oDivPage, {    
  483.             position: ‘absolute‘, background: ‘url(images/‘+(now+1)+‘.jpg) right no-repeat‘, zIndex: 3,  
  484.             left: ‘50%‘, top: 0, width: ‘50%‘, height: ‘100%‘, overflow: ‘hidden‘  
  485.         });  
  486.         Utils.setStyle3(oDivPage, ‘transform‘, ‘perspective(1000px) rotateY(0deg)‘);  
  487.         Utils.setStyle3(oDivPage, ‘transformOrigin‘, ‘left‘);  
  488.           
  489.         oDiv.appendChild(oDivPage);  
  490.           
  491.         var oDivOld=document.createElement(‘div‘);  
  492.           
  493.         Utils.setStyle(oDivOld, {  
  494.             position: ‘absolute‘, left: 0, top: 0, width: ‘50%‘, height: ‘100%‘, zIndex:2,  
  495.             background: ‘url(images/‘+(now+1)+‘.jpg) left no-repeat‘  
  496.         });  
  497.           
  498.         oDiv.appendChild(oDivOld);        
  499.         var oDivShadow=document.createElement(‘div‘);  
  500.           
  501.         Utils.setStyle(oDivShadow, {  
  502.             position: ‘absolute‘, right: 0, top: 0, width: ‘50%‘, height: ‘100%‘, zIndex:2,  
  503.             background: ‘rgba(0,0,0,1)‘  
  504.         });  
  505.   
  506.         oDiv.appendChild(oDivShadow);  
  507.           
  508.         oDivPage.ch=false;  
  509.         fx.buffer(oDivPage, {y:0, opacity: 1}, {y:-180, opacity: 0}, function (now){  
  510.             if(now.y<-90 && !oDivPage.ch)  
  511.             {  
  512.                 oDivPage.ch=true;  
  513.                 oDivPage.innerHTML=‘<img />‘;  
  514.                   
  515.                 var oImg=oDivPage.getElementsByTagName(‘img‘)[0];  
  516.                   
  517.                 oImg.src=http://www.mamicode.com/‘images//‘+(next()+1)+‘.jpg‘;  
  518.                 Utils.setStyle3(oImg, ‘transform‘, ‘scaleX(-1)‘);  
  519.                   
  520.                 Utils.setStyle(oImg, {  
  521.                     position: ‘absolute‘, right: 0, top: 0, width: ‘200%‘, height: ‘100%‘  
  522.                 });  
  523.                   
  524.                 //setStyle3(oDivPage, ‘transform‘, ‘perspective(1000px) scale(-1,1) rotateY(-90deg)‘);  
  525.                 Utils.setStyle3(oDivPage, ‘transformOrigin‘, ‘left‘);  
  526.             }  
  527.               
  528.             if(now.y<-90)  
  529.             {  
  530.                 Utils.setStyle3(oDivPage, ‘transform‘, ‘perspective(1000px) scale(-1,1) rotateY(‘+(180-now.y)+‘deg)‘);  
  531.             }  
  532.             else  
  533.             {  
  534.                 Utils.setStyle3(oDivPage, ‘transform‘, ‘perspective(1000px) rotateY(‘+now.y+‘deg)‘);  
  535.             }  
  536.             oDivShadow.style.background=‘rgba(0,0,0,‘+now.opacity+‘)‘;  
  537.         }, function (){  
  538.             now=next();  
  539.             ready=true;  
  540.         }, 14);  
  541.       
  542.     });  
  543.       
  544.       
  545.     var setStyle3 =function(obj, name, value)  
  546.     {  
  547.         obj.style[‘Webkit‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  548.         obj.style[‘Moz‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  549.         obj.style[‘ms‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  550.         obj.style[‘O‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  551.         obj.style[name]=value;  
  552.     };  
  553.       
  554.     var  setStyle = function(obj, json){  
  555.           
  556.     };  
  557.   
  558.     var rnd = function (n, m){  
  559.         return Math.random()*(m-n)+n;  
  560.     };  
  561.   
  562.   
  563.   
  564. });  
  565.   
  566. var Utils = {  
  567.     setStyle :function(obj,json){  
  568.         if(obj.length)  
  569.             for(var i=0;i<obj.length;i++) Utils.setStyle(obj[i], json);  
  570.         else  
  571.         {  
  572.             if(arguments.length==2)  
  573.                 for(var i in json) obj.style[i]=json[i];  
  574.             else  
  575.                 obj.style[arguments[1]]=arguments[2];  
  576.         }  
  577.     },  
  578.     setStyle3 : function(obj, name, value){  
  579.         obj.style[‘Webkit‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  580.         obj.style[‘Moz‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  581.         obj.style[‘ms‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  582.         obj.style[‘O‘+name.charAt(0).toUpperCase()+name.substring(1)]=value;  
  583.         obj.style[name]=value;  
  584.     },  
  585.     rnd  : function(n,m){  
  586.        return Math.random()*(m-n) + n ;  
  587.     }  
  588.   
  589.   
  590. }  

昨天再blueidea 看到的代码 简单改了下 个人喜欢爆炸那个 chrome还带声音了 超屌
  • CSS3图片展示效果.rar (

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


联系
我们