1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > JS拖动水晶球特效代码

JS拖动水晶球特效代码

时间:2020-09-11 08:05:11

相关推荐

JS拖动水晶球特效代码

代码简介:

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

代码内容:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。