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>


<body>
<img id="head" src="CA2IACOA.gif" style="visibility:hidden">
<img id="tail" src="CA2IACOA2.gif" style="visibility:hidden">
<img id="mid" src="CA2IACOA2.gif" style="visibility:hidden">
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值