HTML

首先我们在页面上放置按钮.btns,#boll球体,#target目标地址

<div class="btns" style="margin-top:20px">
    <a href="javascript:;" id="run">开始</a>
    <a href="javascript:;" id="reset">重置</a>    
    <a href="javascript:;" id="stop">停止</a>
    <a href="javascript:;" id="setOptions">设置参数</a>
</div>
<div id="boll" class="boll"></div>
<div id="target" class="target"></div>

引入parabola插件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/parabola.js"></script>

jQuery调用Parabola

var bool = new Parabola({
    el: "#boll",
    offset: [500, 100],
    curvature: 0.005,
    duration: 2000,
    callback: function() {
        alert("完成后回调")
    },
    stepCallback: function(x, y) {
        console.log(x, y);
        $("<div>").appendTo("body").css({
            "position": "absolute",
            "top": this.elOriginalTop + y,
            "left": this.elOriginalLeft + x,
            "background-color": "#CDCDCD",
            "width": "5px",
            "height": "5px",
            "border-radius": "5px"
        });
    }
});
$("#reset").click(function() {
    bool.reset()
});
$("#run").click(function() {
    bool.start();
});
$("#stop").click(function() {
    bool.stop();
});
$("#setOptions").click(function() {
    bool.setOptions({
        targetEl: $("#target"),
        //目标地址
        curvature: 0.0001,
        //曲线偏离直线的弧度
        duration: 1000 //动画延时毫秒
    });
});