jQuery抛出球体以抛物线轨迹的实验_其它特效_jQuery插件_抛物线_Parabola

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

淘建站为您提供更多_其它特效_jQuery插件_抛物线_Parabola，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 289 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

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

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