js练习--小圆链

createChain.chainSet=[];function createChain(ballsNum,lockLeft,lockTop){var chain=new ballsChain(ballsNum,lockLeft,lockTop);chain.initializeChain();createChain.chainSet.push(chain);document.onmousemove=function(event){ballsChain.clientX=event.clientX;ballsChain.clientY=event.clientY;for(var i=0;i<createChain.chainSet.length;i++){createChain.chainSet[i].moveChain();}}}function ballsChain(num,ll,lt){this.ballsNum=num;this.lockLeft=ll;this.lockTop=lt;this.ballsSet=[];}ballsChain.prototype.initializeChain=function(){for(var i=0;i<this.ballsNum;i++){var ball=document.createElement("p");ball.style.left=this.lockLeft+"px";ball.style.top=this.lockTop+"px";document.body.appendChild(ball);this.ballsSet.push(ball);}}ballsChain.prototype.moveChain=function(){for(var i=0;i<this.ballsNum;i++){this.ballsSet[i].style.left=this.lockLeft+i*((ballsChain.clientX-this.lockLeft)/this.ballsNum)+"px";this.ballsSet[i].style.top=this.lockTop+i*((ballsChain.clientY-this.lockTop)/this.ballsNum)+"px";}}createChain(50,100,100);createChain(50,200,100);createChain(50,100,200);createChain(50,200,200);

<style type="text/css">p{ border-radius:50%;width:10px;height:10px;background-color:#000000;position:absolute}</style>

花了一天时间修改了之前的代码（之前的不贴了），主要是想实现：
①一步（即上面的createChain（50，100，100））即可创建一条链，之前的是自己创建一个实例，还得手动生成链、注册监听器。
②用prototype、类属性的概念优化之前的代码。以下是得到的一些心得（不一定对哈，望高手指点）
一、类属性、this修饰的属性、prototype修饰的属性的区别：

类属性只能通过类访问，

实例属性（this修饰）只能通过实例访问，

prototype修饰属性不能通过类访问，可以通过实例访问
例：function A(num)
{

   A.a=0;

   this.b=num;

}
A.prototype.c=99;
a1=new A(5);
a2=new A(55);

则可有如下表

                .a               .b                   .c

A              0         undefined   undefined

a1    undefined        5                   99

a2 undefined        55                 99

二、动画效果就是数据的计算+数据的呈现