jQuery抛物线运动实现方法(附完整demo源码下载)

2019-11-20 10:50:16

字体：大中小

来源：转载

供稿：网友

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

运行效果截图如下：

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

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

具体代码如下：

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>抛物线运动效果</title> <style type="text/css">  .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;  } </style> <script type="text/javascript" src="js/jquery1.8.3.min.js"></script> <script type="text/javascript" src="js/parabola.js"></script></head><body> <div class="btns" style="margin-top:20px"> <a href="#" class="btnA btn-danger" id="reset" rel="popover" title="A Title" style="">reset</a> <a href="#" class="btnA btn-danger" id="run" rel="popover" title="A Title" style="">run</a> <a href="#" class="btnA btn-danger" id="stop" rel="popover" title="A Title" style="">stop</a> <a href="#" class="btnA btn-danger" id="setOptions" rel="popover" title="A Title" style="">setOptions</a></div><div id="boll" class="boll"></div><div id="target" class="target"></div><script type="text/javascript"> 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);   $("<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 (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  }); });</script></body></html>

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

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

上一篇：JavaScript缓冲运动实现方法(2则示例)

下一篇：基于javascript实现右下角浮动广告效果