jQuery抛出球体以抛物线轨迹的实验

今天分享一个用jQuery实现简单的模拟抛物线轨迹的插件，可以开始和暂停抛物线的运动，以及重新设置抛物线的参数。

分类：3D > 抛物线难易：中级

查看演示下载资源下载积分： 20 积分

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 //动画延时毫秒
    });
});