html5图标爆炸碎片特效_鼠标悬浮图片爆炸效果

$(function(){ var now=0; var ready=true; var W=400; var H=300; var $img = $("#imgbz"); var oDiv = $img.get(0); var next =function(){ return (now+1)%3; } //爆炸 $("#imgbz").on("mouseover",function(){ if(!ready)return; ready=false; var R=4; var C=7; var cw=W/2; var ch=H/2; oDiv.innerHTML=''; oDiv.style.background='url(images/syt'+(next()+1)+'.jpg) center no-repeat'; var aData=[]; var wait=R*C; for(var i=0;i'); 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+'px no-repeat', left: aData[i].left+'px', top: aData[i].top+'px' }); oDiv.appendChild(oNewDiv[0]); var l=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C); var t=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R); setTimeout((function (oNewDiv,l,t){ return function () { 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)); } } }); var setStyle3 =function(obj, name, value) { obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value; obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value; obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value; obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value; obj.style[name]=value; }; var setStyle = function(obj, json){ }; var rnd = function (n, m){ return Math.random()*(m-n)+n; };});var Utils = { setStyle :function(obj,json){ if(obj.length) for(var i=0;i

在线演示        积分下载        6毛下载        砍两刀下载       

未经允许不得转载： ICode联盟 » 插件特效 » html5图标爆炸碎片特效_鼠标悬浮图片爆炸效果