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<R;i++){
			for(var j=0,k=0;j<C;j++,k++)
			{
				aData[i]={left: W*j/C, top: H*i/R};
				var oNewDiv=$('<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+'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<obj.length;i++) Utils.setStyle(obj[i], json);
		else
		{
			if(arguments.length==2)
				for(var i in json) obj.style[i]=json[i];
			else
				obj.style[arguments[1]]=arguments[2];
		}
	},
	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;
	},
	rnd  : function(n,m){
	   return Math.random()*(m-n) + n ;
	}


}