suchen

Heim >Web-Frontend >js-Tutorial >jQuery simuliert die freie Fallbewegung von Objekten (mit Demo und Demo-Quellcode-Download)_jquery

jQuery simuliert die freie Fallbewegung von Objekten (mit Demo und Demo-Quellcode-Download)_jquery

WBOY
WBOYOriginal
2016-05-16 15:18:531192Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery die freie Fallbewegung von Objekten simuliert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Klicken Sie hier, um die Online-Demonstration anzusehen.

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Der spezifische Code lautet wie folgt: 

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

Leser, die an weiteren Inhalten zum Thema JS-Sport interessiert sind, können sich das Spezialthema dieser Website ansehen: „Zusammenfassung der JavaScript-Sporteffekte und -Techniken“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse häufiger Probleme in jquery mobile development_jqueryNächster Artikel：Analyse häufiger Probleme in jquery mobile development_jquery

In Verbindung stehende Artikel

Mehr sehen