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

下载地址

 

$(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;i++)>;i++){>

dd: