JS拖动水晶球特效代码
代码简介：
请等待图片加载完成，比较炫的一个创意，你自行车的链条一样，鼠标拖动水晶球，模拟了系在一起的物体的运动过程，那些小球也挺漂亮。
代码内容：
View Code
<html>
<head>
<title>JS拖动水晶球特效代码_网页代码站(www.webdm.cn)</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>
<body>
<img id="head" src="http://www.webdm.cn/images/20091003/CA2IACOA.gif" style="visibility:hidden">
<img id="tail" src="http://www.webdm.cn/images/20091003/CA2IACOA2.gif" style="visibility:hidden">
<img id="mid" src="http://www.webdm.cn/images/20091003/CA2IACOA2.gif" style="visibility:hidden">
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/6465c2ce-8359-41ad-a1fc-7861435054aa.html
<head>
<title>JS拖动水晶球特效代码_网页代码站(www.webdm.cn)</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>
<body>
<img id="head" src="http://www.webdm.cn/images/20091003/CA2IACOA.gif" style="visibility:hidden">
<img id="tail" src="http://www.webdm.cn/images/20091003/CA2IACOA2.gif" style="visibility:hidden">
<img id="mid" src="http://www.webdm.cn/images/20091003/CA2IACOA2.gif" style="visibility:hidden">
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
代码来自：http://www.webdm.cn/webcode/6465c2ce-8359-41ad-a1fc-7861435054aa.html
