web上实现起点到终点的抛物线轨迹运动
需求：在web上实现一个div层按照投篮过程篮球运动轨迹运动。
在web上实现一个div层的移动很简单，只需要将该div的position设置为absolute后改变其top和left就可以改变此div层在页面的位置。
投篮过程篮球运动轨迹可以近似看成抛物线运动，此处的难点在于从起点到终点做抛物线轨迹的运动。
web使用的是坐标系的第一象限，其上点的坐标都为正数。抛物线的方程为
y = p * (x-a)2 + b
一条抛物线轨迹可以由3点唯一确定，现在我们已知起点和终点，再找出一点就可以画出一条抛物线。我们将抛物线的顶点设置在x轴上这样我们得到抛物线的方程为
y = p * (x-a)2
设起始点坐标为x1，y1终点坐标为x2，y2则有
y1 = p * (x1-a)2
y2 = p * (x2-a)2
假设x1 > x2 ，可计算出
p = ((sqrt( y1) + sqrt( y2)) / (x1 - x2) )2
a = x1 - sqrt(y1 / p)
这样通过给定的起始点和终点就可以得到p和a的值即得到抛物线方程的公式。
接下来通过设置点在x轴上做匀速运动，通过抛物线方程算出y值，再加上y方向的偏移量就得到了最终每一个点的x,y坐标。
具体代码如下：
1 <html>
2 <head>
3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
4 <script type="text/javascript">
5 var index = 0;
6 //起点和终点坐标
7 var startX = 400;
8 var startY = 400;
9 var endX = 100;
10 var endY = 100;
11 var distance = 0;
12 var time = 40;
13 //当前坐标
14 var x,y;
15 //x,y方向的增量
16 var addX = 100;
17 var addY = 100;
18 //定时器
19 var inter;
20 //抛物线方程系数
21 var p, a;
22
23 var p2 = function(x) {
24 return x*x;
25 }
26 var display = function() {
27 //设置内容
28 $("#ball").html("up" + index);
29 //计算移动的x值
30 x = startX - distance / time * index++;
31 //计算抛物线系数p,a
32 p = p2 ( (Math.sqrt(startY) + Math.sqrt(endY)) / (startX - endX) );
33 a = startX - Math.sqrt(startY / p);
34 //已知x，根据抛物线方程计算出y
35 y = p * p2(x - a);
36 //加上偏移量后更改坐标
37 $("#ball").css({
38 top: y + addY,
39 left: x + addX
40 });
41 //到终点时停止定时任务
42 if (index == 41) {
43 window.clearInterval(inter);
44 }
45 }
46 $(document).ready(function () {
47 //设置初始内容及坐标
48 $("#ball").html("ball");
49 $("#ball").css({
50 position: 'absolute',
51 left: startX,
52 top: startY
53 });
54 //计算起始点与终点之间x轴的平行距离，便于做x轴的平行移动
55 distance = startX - endX;
56 //设置定时任务，每隔25毫秒移动一次
57 inter = setInterval("display();",25);
58 });
59 </script>
60 </head>
61 <body>
62 <div id='ball'></div>
63 </body>
64 </html>
