jQuery模拟物体自由落体运动(附演示与demo源码下载)

前端技术 2023/09/05 JavaScript

本文实例讲述了jQuery模拟物体自由落体运动的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

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

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

具体代码如下：

<!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>

更多关于js运动相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》

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

本文地址：https://www.stayed.cn/item/12075

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案