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

运行效果截图如下：

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

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

具体代码如下：

！DOCTYPE HTMLhtmlhead元字符集='utf-8 '标题抛物线运动效果/title style type='text/css ' .boll { width: 50px高度： 50px背景-color : # ff 3333；绝对位置：top : 380 pxleft : 100px-moz-border-radius : 50px；-web套件-边框-半径： 50px边界半径： 50px} .目标{宽度： 50像素高度： 50px背景-彩色： # CDCDCD绝对位置：top : 180 pxleft : 600 px-moz-border-radius : 50px；-web套件-边框-半径： 50px边界半径： 50px}/style脚本类型=' text/JavaScript ' src=' http : js/jquery 1。8 .3 .量滴js/script脚本类型=' text/JavaScript ' src=' http : js/抛物线。js '/script/head dy div class=' btns ' style=' margin-top :20 px ' A href=' # ' class=' btnA BTN-danger ' id=' reset ' rel=' popover '完成后回调)}，stepCallback:function(x，y){ console.log(x，y)；$(“div”).appendTo("正文")。css({ 'position': 'absolute '，' top ' : this.elOriginalTop y，' left ' : this。eloriginaltleft x，'底色' :'#CDCDCD '，'宽度' :'5px '，'高度' :'5px '，'边框半径' : ' 5px ' })；} });$(“# reset”).点击(功能(事件){事件。prevent default()；布尔。reset()})；$('#run ').点击(功能(事件){事件。prevent default()；布尔。start()；});$('#stop ').点击(功能(事件){事件。prevent default()；布尔。stop()；});$('#setOptions ').点击(功能(事件){事件。prevent default()；布尔。setoptions({ target El : $(' # target ')、curvature: 0.001、duration : 1000 })；});/脚本/正文/html更多关于Java脚本语言运动效果相关内容可查看本站专题： 《JavaScript运动效果与技巧汇总》

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