代码简介：
请等待图片加载完成，比较炫的一个创意，你自行车的链条一样，鼠标拖动水晶球，模拟了系在一起的物体的运动过程，那些小球也挺漂亮。
代码内容：
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-7861435 054aa .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-7861435 054aa .html
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
