Heim > Artikel > Web-Frontend > jQuery-Implementierungsmethode für parabolische Bewegungen (mit vollständigem Download des Demo-Quellcodes)_jquery

jQuery-Implementierungsmethode für parabolische Bewegungen (mit vollständigem Download des Demo-Quellcodes)_jquery

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

Das Beispiel in diesem Artikel beschreibt, wie die parabolische Bewegung von jQuery implementiert wird. 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>
<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>

Weitere Inhalte zu JavaScript-Bewegungseffekten finden Sie im Sonderthema auf dieser Website: „Zusammenfassung der JavaScript-Bewegungseffekte und -Techniken“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

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：js-Kennwortstärkeerkennung_Javascript-KenntnisseNächster Artikel：js-Kennwortstärkeerkennung_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen