html5怎么设置按钮动画效果,html5点击按钮球抛物线动画特效

特效描述：点击按钮 球抛物线动画 动画特效。html5球抛物线动画

代码结构

1. 引入JS

2. HTML代码

run

reset

stop

setOptions

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);

$("

").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.001,

duration: 1000

});

});