Home > Article > Web Front-end > jQuery parabolic motion implementation method (with complete demo source code download)_jquery

jQuery parabolic motion implementation method (with complete demo source code download)_jquery

WBOYOriginal: 2016-05-16 15:21:081756browse

The example in this article describes how to implement jQuery parabolic motion. Share it with everyone for your reference, the details are as follows:

The screenshot of the running effect is as follows:

Click here to view the online demonstration .

Click here for complete example codeDownload from this site.

The specific code is as follows:

<!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" >reset</a>
 <a href="#" class="btnA btn-danger" id="run" rel="popover" title="A Title" >run</a>
 <a href="#" class="btnA btn-danger" id="stop" rel="popover" title="A Title" >stop</a>
 <a href="#" class="btnA btn-danger" id="setOptions" rel="popover" title="A Title" >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>

For more content related to JavaScript motion effects, please view the special topic on this site: " Summary of JavaScript motion effects and techniques"

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js password strength detection_javascript skillsNext article：js password strength detection_javascript skills

See more

jQuery parabolic motion implementation method (with complete demo source code download)_jquery

Related articles