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-7861435 054aa .html

转载于:https://www.cnblogs.com/webdm/archive/2011/08/11/2134482.html

JS拖动水晶球特效代码相关推荐

js点击网页背景特效和js打字状态特效代码
/* 鼠标点击显示文字JS特效代码 */ var a_idx = 0; jQuery(document).ready(function($) {$("body").click(fu ...
HTML制作可拖动座位表,简单易懂的jquery制作可拖动图层特效代码
脚本代码(For Alixixi.com)如下: 利用jquery实现简单拖曵原理实例 by js.alixixi.com #drag{width:400px;height:300px;cursor: ...
利用canvas实现的JS画圆圈特效代码
<body> <canvas id="myCanvas" width="1200" height="300" style ...
js红包雨js特效代码
下载地址 js红包雨特效代码,原生JavaScript代码实现的红包雨效果, dd:
js光斑粒子js特效代码
下载地址 js光斑粒子特效代码 dd:
js放羊动画js特效代码
下载地址 js放羊动画特效代码 dd:
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...

JS拖动水晶球特效代码

JS拖动水晶球特效代码相关推荐

最新文章

热门文章