前端ABC写这个原因一方面由于自己感兴趣，另一方面是因为有个朋友去JTS面试问到这个，朋友回答不会以后被鄙视了一番。。。
以前看到有人写抛物线，洋洋洒洒的写了好多字，看得有点头大，所以自己写了一个，代码更少，思路更清晰而且扩展性也强了。
不过这里还有待完善，聪明可爱的你，能看出来问题在哪儿吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
position: relative;
}
.ball{
width:20px;
height:20px;
background-color: #00b3ee;
border-radius:20px;
position: absolute;
top:500px;
left: 100px;
}
</style>
</head>
<body>
<div class="ball"></div>
根据数学中的抛物线思想，x轴随着时间自增，y轴与x轴则有对应的抛物线关系，
<script>
function parabola (obj){
obj.ele.style.left=obj.init_pos.x+"px";
obj.ele.style.top=obj.init_pos.y+'px';
var time=0;
var x;
var y;
//注意这里的差值y是-obj.tar_pos.y+obj.init_pos.y，因为在这里的y轴坐标与数学中的y值坐标相反
var b=(-obj.tar_pos.y+obj.init_pos.y+obj.radian*Math.pow((obj.tar_pos.x-obj.init_pos.x),2))/(obj.tar_pos.x-obj.init_pos.x);
var is_arrive_x=false;
var is_arrive_y=false;
//开启定时器
var timer=setInterval(function () {
var space_num=(obj.tar_pos.x-obj.init_pos.x)>0?+obj.space_ratio:-obj.space_ratio;
x=obj.init_pos.x+space_num*time
y=-obj.radian*Math.pow(x-obj.init_pos.x,2)+b*(x-obj.init_pos.x);
console.log("y===="+y);
console.log("x===="+x);
obj.ele.style.left=x+"px";
obj.ele.style.top=obj.init_pos.y-y+'px';
time+=0.1;
//设置停止条件
//实际运动点与目标点的差值
var actual_Diff_x=x-obj.tar_pos.x;
var actual_Diff_y=obj.init_pos.y-y-obj.tar_pos.y;
//设置终点坐标
function final(){
obj.ele.style.left = obj.tar_pos.x + "px";
obj.ele.style.top = obj.tar_pos.y + 'px';
clearInterval(timer);
}
if( Math.abs(actual_Diff_x)<=1&&!is_arrive_x){
is_arrive_x=true;
}
if( Math.abs(actual_Diff_y)<=1&&!is_arrive_y){
is_arrive_y=true;
}
//为了让最后到达的坐标值到达指定位置 需要设置此项
if(is_arrive_x&&is_arrive_y){
final();
}
},obj.time)
}
parabola({
ele:document.getElementsByClassName("ball")[0],
time:5,
space_ratio:10,//自增值系数，如果写的过大，最后停止时差值过大不容易控制,
radian:0.001,//弧度,如果抛出弧度顶点过大则调小弧度即可
init_pos:{ //初始位置
x:0,
y:500,
},
tar_pos:{ //目标位置
x:500,
y:20
}
});
</script>
</body>
</html>