代码简介:
请等待图片加载完成,比较炫的一个创意,你自行车的链条一样,鼠标拖动水晶球,模拟了系在一起的物体的运动过程,那些小球也挺漂亮。
代码内容:
View Code <html>
<head>
<title>JS拖动水晶球特效代码_网页代码站()</title>
<styletype= " 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>
<scripttype= " text/javascript " ><!--
document.onselectstart=newFunction( " returnfalse " ) ;
b=newObject() ;
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);
}
returnfalse ;
}
document.onmousedown=function(e){
if(!e)e=window.event ;
vartg=(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 " ;
}
returnfalse ;
}
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 ;
}
functionmainloop(){
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]=newCWorm(src,. 95 ) ;
}
mainloop() ;
}
//-->
</script>
</head>
<body>
<imgid= " head " src= " /images/1003/CA2IACOA.gif " style= " visibility:hidden " >
<imgid= " tail " src= " /images/1003/CA2IACOA2.gif " style= " visibility:hidden " >
<imgid= " mid " src= " /images/1003/CA2IACOA2.gif " style= " visibility:hidden " >
</body>
</html>
<br/>
<p><ahref= " " >网页代码站</a>-最专业的网页代码下载网站-致力为中国站长提供有质量的网页代码!</p>
代码来自: http: ///webcode/6465c2ce- 8359 -41ad-a1fc-7861435 054aa .html