jQuery simulates free falling motion of objects (with demo and demo source code download)

jQuery simulates free falling motion of objects (with demo and demo source code download)_jquery

WBOY

Release： 2016-05-16 15:18:53

Original

1137 people have browsed it

The example in this article describes how jQuery simulates the free fall motion of objects. 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 the complete example codeDownload from this site.

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>自由落体</title>
 <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
 <script type="text/javascript" >
  $(document).ready(function () {
  });
  var all_Height = 500;
  var a = 9.8; // 加速度
  var v = 0;
  var prev_Time = 0;
  var prev_Speed = 0;
  var prev_Height = 0;
  var speed = 0;
  // 获取当前的高度
  var getHeight = function (obj) {
   return obj.offset().top;
  }
  // 获取当前的速度
  var getSpeed = function (time, a) {
   return time * a;
  }
  // 向下走时获得当前物体所走的路径
  var getCurrentHeight = function (time) {
   return 1 / 2 * a * time * time;
  }
  // 向上走时获得当前物体所走的路径
  var getCurrentHeight2 = function (speed, time) {
   return speed * time - 1 / 2 * a * time * time;
  }
  // 向下跑
  function down() {
   prev_Time = 0;
   var interval = setInterval(function () {
    if (getHeight($(".obj")) < all_Height) {
     prev_Time = prev_Time + 0.1;
     var height = getCurrentHeight(prev_Time) + prev_Height;
     $(".obj").css("top", height + "px");
     $(".info").append("<div>" + height + "</div>");
    } else {
     speed = getSpeed(a, prev_Time);
     prev_Speed = speed;
     clearInterval(interval);
     up();
    }
   }, 5);
  }
  // 向上跑
  function up() {
   prev_Time = 0;
   prev_Speed -= 4; // 动能损耗
   var interval = setInterval(function () {
    if (speed > 0) {
     speed = prev_Speed - getSpeed(a, prev_Time);
     prev_Time = prev_Time + 0.1;
     var height = all_Height - getCurrentHeight2(prev_Speed, prev_Time);
     $(".obj").css("top", height + "px");
    } else {
     clearInterval(interval);
     prev_Height = $(".obj").offset().top;
     if (prev_Height < all_Height) {
      down();
     }
    }
   }, 5);
  }
  function play() {
   alert('play');
   down();
   document.getElementById("obj").onclick = null;
  }
 </script>
 <style type="text/css">
 body{ margin:0 0 0 0 ; background:#FFFFFF;}
 .title { text-align:center; color:#666666; border-bottom:2px solid gray; font-size:30px; line-height:100px; font-weight:bolder;}
 .obj { background-image:url('a.jpg'); width:50px; height:50px; position:absolute; top:0; left:0; }
 </style>
</head>
<body>
<div style="height:550px; border-bottom:2px solid gray;">
<div class="title" >自由落体大模拟<span style="font-size:12px;">(点击图片让它落下)</span></div>
</div>
<div class="obj" id="obj" onclick="play();" ></div>
</body>
</html>

Copy after login

Readers who are interested in more content related to js sports can check out the special topic of this site: "Summary of JavaScript sports effects and techniques"

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