用java编写一个抛物线运动_jQuery抛物线运动实现方法(附完整demo源码下载)

本文实例讲述了jQuery抛物线运动实现方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

点击此处查看在线演示效果。

完整实例代码点击此处本站下载。

具体代码如下：

抛物线运动效果

.boll {

width: 50px;

height: 50px;

background-color: #ff3333;

position: absolute;

top: 380px;

left: 100px;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

.target {

width: 50px;

height: 50px;

background-color: #CDCDCD;

position: absolute;

top: 180px;

left: 600px;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

reset

run

stop

setOptions

var bool = new Parabola({

el: "#boll",

offset: [500, 100],

curvature: 0.005,

duration: 3000,

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 (event) {

event.preventDefault();

bool.reset()

});

$("#run").click(function (event) {

event.preventDefault();

bool.start();

});

$("#stop").click(function (event) {

event.preventDefault();

bool.stop();

});

$("#setOptions").click(function (event) {

event.preventDefault();

bool.setOptions({

targetEl: $("#target"),

curvature: 0.001,

duration: 1000

});

});

更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》

希望本文所述对大家jQuery程序设计有所帮助。