从整一份代码的规划来看的话，就是所有的方法，变量都放在funParabola函数里面 好处的话，大家都知道，防止全局变量的污染。假如是我的话，我估计是采用define包装下，其实都差不多，他里面也通过return exports暴露了一个对象
var exports = {
mark: function() { return this; },
position: function() { return this; },
move: function() { return this; },
init: function() { return this; }
};
var moveStyle = "margin", testDiv = document.createElement("div");
//排除IE8-的
if ("oninput" in testDiv) {
["", "ms", "webkit"].forEach(function(prefix) {
var transform = prefix + (prefix? "T": "t") + "ransform";
if (transform in testDiv.style) {
moveStyle = transform;
}
});
}
整一份代码基本上就是这样，剩下的那些，就是抛物线的计算了，根据抛物线的运算公式，就可以很简单得算出运动的轨迹 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值） 公式： y = axx + b*x + c;
做了两份demo： demo1：
<!doctype html >
<html>
<head>
<meta charset="utf-8"/>
<title>抛物线运动</title>
<style>
*{ margin: 0; padding: 0}
.box { width: 30px; height: 30px; border-radius: 50%; background: #000; position: absolute;}
#element { top:100px; left: 100px;}
#targer { top:500px; left: 600px;}
</style>
</head>
<body>
<input type="button" value="抛物线" onclick="test()"/>
<div class="box" id="element"></div>
<div class="box" id="targer"></div>
</body>
<script>
function test(){
var element=document.getElementById("element"),
targer=document.getElementById("targer"),
elementTop=100,
elementLeft=100,
timer=null,
//斜率
a=0.001,
//X方向的速度
v=5,
x=0,
y=0,
//b的值
b=(400-a*500*500)/500;
timer=setInterval(function(){
x+=v;
element.style.left=elementLeft+x+"px";
element.style.top=elementTop+(a*x*x+b*x)+"px";
if(x>=500){
clearInterval(timer);
}
},50)
}
</script>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{padding:0;margin:0;} body{font-size:13px;padding:10px;} p{margin:2px;}
.wrap{position:relative;width:580px;height:326px;margin:0 auto;border:1px
solid #ccc;margin-top:50px;}
#fall{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<h3>
模拟重力状态下的抛物运动
</h3>
<p>
横向初速度：
<input id="Vx" type="text" value="1" />
px/ms
</p>
<p>
纵向初速度：
<input id="Vy" type="text" value="-2" />
px/ms
</p>
<p>
重力加速度：
<input id="a" type="text" value="0.0098" />
px/平方ms
</p>
<p>
（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）
</p>
<p>
单位时间：
<input id="t" type="text" value="2" />
（记录运动的时间间隔）
<p>
<input type="button" value="演示" onclick="demo(document.getElementById('Vx').value, document.getElementById('Vy').value, document.getElementById('a').value, document.getElementById('t').value)"
/>
</p>
<div id="fall">
<div class="box" id="element" style="position:absolute; left:20px; top:420px; width: 30px; height: 30px; border-radius: 50%; background: #000; "></div>
</div>
<div id="line" style="position:absolute; left:0; top:450px; width:900px; height:2px; background:#f00;"></div>
<script type="text/javascript">
//假设是一个炮弹运动的话，重力加速度基本恒定了，g，0.0098
//已弹弹堂的游戏，有个力度的能力，代表横向速度Vx。假设为1
//假如斜率为60°，那么根据勾股定理，纵向速度Vy，为-2，因为根据页面的坐标要为反方向，才能向上，所以为负数
//时间T就是运动时间间隔
//假设目标经过原点(0,0)，那么y=ax^2+bx,C为0
function demo(x, y, a, t) {
var f = document.getElementById('fall');
var Vx = x,
Vy = parseInt(y),
g = a,
t = parseInt(t),
h = 0,
l = 0,
Sx = 0,
Sy = 0;
var i = setInterval(function() {
if (f) {
Sx += Vx * t;
l = Sx;
Vy += g * t;
h += Vy * t;
f.style.left = l + 'px';
f.style.top = h + 'px';
if (h>=0) {
//因为小数点的原因
f.style.left = l + 'px';
clearInterval(i);
}
}
},
t);
}
</script>
</body>
</html>