Js拖动特效，一串水晶球

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js拖动特效，一串水晶球

分类

图片代码

描述

请等待图片加载完成，比较炫的一个创意，你自行车的链条一样，鼠标拖动水晶球，模拟了系在一起的物体的运动过程，那些小球也挺漂亮。