Js拖動特效，一串水晶球_圖片特效特效

請等待圖片加載完成，比較炫的一個創意，你自行車的鏈條一樣，鼠標拖動水晶球，模擬了系在一起的物體的運動過程，那些小球也挺漂亮。

<html>
<head>
<title>可以在網頁上拖動的水晶球特效</title>
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
.worm {position:absolute;z-index:2000;cursor:pointer;}
</style>
<script type="text/javascript"><!--
document.onselectstart = new Function("return false");
b  = new Object();
xm = 0;
ym = 0;
dx = 0;
dy = 0;
dt = 0;
M  = false;
zz = 10;
Nw = 19;
link = function(B,o){
	if(M!=B){
		dx = (o.X+o.WB)-(B.X+B.WB);
		dy = (o.Y+o.WB)-(B.Y+B.WB);
		dt = (B.WB+o.WB)-Math.sqrt(dx*dx+dy*dy);
		ang = Math.atan2(dy,dx);
		B.X -= dt*Math.cos(ang);
		B.Y -= dt*Math.sin(ang);
	}
}

repuls = function(B,i){
	for(j=i;j<Nw;j++){
		o = b[j];
		dx = (o.X+o.WB)-(B.X+B.WB);
		dy = (o.Y+o.WB)-(B.Y+B.WB);
		dt = (B.WB+o.WB)-Math.sqrt(dx*dx+dy*dy);
		if(dt>1){
			ang = Math.atan2(dy,dx);
			dx = dt*Math.cos(ang);
			dy = dt*Math.sin(ang);
			B.X -= dx;
			B.Y -= dy;
			o.X += dx;
			o.Y += dy;
		}
	}
}

document.onmousemove = function(e){
	if (!e) e = window.event;
	xm = (e.x || e.clientX);
	ym = (e.y || e.clientY);
	if(M!=false){
		M.X=xm+xZ;
		M.Y=ym+yZ;
		for(i=Nw-2;i>=0;i--)link(b[i],b[i+1]);
		for(i=1;i<Nw;i++)link(b[i],b[i-1]);
		for(i=0;i<Nw-1;i++)repuls(b[i],i+2);
	}
	return false;
}

document.onmousedown = function(e){
	if (!e) e = window.event;
	var tg = (e.target) ? e.target : e.srcElement;
	if(tg.className=="worm"){
		M = tg.obj;
		xZ = M.X-xm;
		yZ = M.Y-ym;
		M.O.style.cursor="move";
	}
	return false;
}

document.onmouseup = function(){
	if(M!=false){
		M.O.style.cursor="pointer";
		M = false;
	}
}

CWorm = function(img,z) {
	this.WB = z*.5*Math.max(img.width,img.height);
	this.X  = zz;
	zz += this.WB*2;
	this.Y  = (document.body.offsetHeight/2)-this.WB;
	this.O = document.createElement("img");
	this.O.src = img.src;
	this.O.className = "worm";
	document.body.appendChild(this.O);
	this.O.obj = this;
}

function mainloop(){
	for(i=0;i<Nw;i++){
		with(b[i]){
			b[i].O.style.left = X;
			b[i].O.style.top  = Y;
		}
	}
	setTimeout("mainloop()",16);
}

onload = function() {
	for(i=0;i<Nw;i++){
		src=document.getElementById((i===0 || i===Nw-1)?"head":(i===Math.floor(Nw/2))?"mid":"tail");
		b[i] = new CWorm(src,.95);
	}
	mainloop();
}
//-->
</script>
</head>

所屬頻道：圖片特效特效/更新時間：2012-11-24

[收藏][報錯][返回列表]

相關圖片特效特效：

Js拖動特效，一串水晶球_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些