记得上周五在群里看到一个网站，洒家忍不住戳进去了cyl-cs.pp.163.com/2012，看到一个页面，效果还不错，附图一张：

当时看了下源码，js写的。这要是扒源码不累死才怪，要是个css3嘛，一会儿就搞定的。可它偏偏是个js，唉，无奈了，源码也不扒了，有空时自己慢慢写吧。

昨天下午在家闲着没事便花费了一下午的时间写了一个模拟小球做圆周运动的小实例。看似实现起来是有点复杂，但洒家总感觉这个与flash as中的小球圆周运动有几分类似，于是便大胆的用jq尝试写。开始写的时候自己也不确定能够写出来，抱着试试的态度完成了如下效果：

效果分析：点击"play"，小球开始顺着外面的路线进行运动，到达终点时停止运动，中途可通过点击"stop"来控制小球的运动，同理，再次点击"play"时小球将继续运动。

由于洒家水平有限，只能做到这个地步，(那条线弄不出来，但要是利用背景用宽高度来控制按理说还是能做出来的，这里没有做了。)但效果还是没有原网站的炫的。这个有待日后加以修正。下面来分享下洒家实现的思路与步骤：

从上面的实例中可以看出小球一直是在围绕着指定的路线进行运动的，轨迹是一个圆。这里就牵扯到圆的方程了，(咳咳，这里的方程没有高中时的复杂，不会让你知一求三，知二求五，最终把ABCDEF等参数都求出来。)这里只需要掌握一个简单的圆方程式即可。假设圆的半径为r,小球运动的角度为" θ"，在圆上一点为A(x,y),那么我们可以利用正、余弦将x与y表示出来，即：

x=r*cosθ;y=r*sinθ

由于这里的是一个度数，在这里需要对其进行转化成数值，接下来再引入一个公式，也就是"弧度"即:

弧度＝度×π/180;

好了，公式已经全部写出来了，接下来就是应用了。这里的正、余弦以及π可不能像数学中那样写，示例：

cos→Math.cos();π→Math.PI

洒家将x的值传递给left;将y的值传递给top来完成了这个模拟小球做圆周运动的效果。当然，方法不局限于一种，更多方法在等待小朋友们的发现中。想练手的小朋友们可以根据以上提示进行操作，遇到不会的地方可以在评论中提出，入群咨询也是可以的哈。q群:231749938

点此下载→→【代码】初次尝试用jq模拟小球做圆周运动.zip　　

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2013-11-25/119.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。