検索

ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します

高洛峰
高洛峰オリジナル
2016-12-28 10:45:531148ブラウズ

ピーシューター、芝生、弾丸はすべて既成の画像です。

1. jQuery はライブラリですか、それともフレームワークですか?

jQueryはフレームワークというより、今最も人気のあるjsライブラリと言えます。

以前、Zhihu で次のようなことを言っているのを見ました:

特定の制約の下でフレームワークを使用します。

個人的には、js ライブラリはドキュメント要素と直接対話する API を指し、ライブラリを直接参照してサービスを提供できると思います。フレームワークはアーキテクチャ レベルに偏っています。フレームワークを使用する場合は、そのルールに従う必要があります。たとえば、angular.js はメソッドを提供すると同時に、DOM ドキュメント構造を制約します。

Java の 3 つの主要なフレームワークを例に挙げると、Spring を使用したい場合は、鉄筋コンクリートが完成しているので、その手順に従う必要があります。入れて飾ります。このライブラリは StringUtils に似ていますが、公開するインターフェイス以外は何も気にする必要はありません。直接呼び出すことができます。

2. jQuery のアニメーション関数

animate() 関数は、CSS 属性に基づいてカスタム アニメーションを実行するために使用されます


基本的な使用法: 

$('#id').animate(css,time,callback);

css: 最終的に実装する必要があるスタイルのリスト


時間:遷移時間


コールバック: コールバック関数

animate 関数は、主に CSS スタイルの遷移効果を実現するために使用されます。

3. jQuery を導入します


たとえば、今私は div ボックスを持っています。 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
   #box {
    width: 300px;
    height: 300px;
    background:greenyellow;
   }
  </style>
 </head>
 <body>
  <div id=&#39;box&#39;></div>
 </body>
 
 <script>
 
 </script>
 
</html>


上記のコードでは、Baidu が提供する jQuery ファイルを導入しました。

では、導入が成功したかどうかを素早く判断するにはどうすればよいでしょうか?次のメソッドが提供されています:


1.console.log($);


効果:

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します これは、導入が成功したことを示します。

2. ブラウザで直接確認します


ページを開いて F12 を押すと、ブラウザに付属のこのようなコンソールが表示されます (ここでは Google Chrome を使用しています)。

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します$

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますを入力してください！

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますねえ、これでいいの？

4. onmouseover イベント


div ボックスにマウスオーバーイベントを追加しましょう。 

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 alert();
});

クロスしてください:

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現しますまあ、これは少なくとも、これまでのコードが正しいことを示しています。私が初めて js を学んだとき、これはコードのすべての行がうまく書かれていると感じさせます。安心してください。

5. animate 関数を使用してボックスの幅と高さを変更します


アラートを削除し、次のコードを追加します: 

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500);
});

これは、マウスを上に描くと幅が 600 ピクセルに変更され、遷移時間は 500 ミリ秒です。

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します幅を2倍にした後、高さを2倍にしたい場合はどうすればよいですか?

ちなみに、コールバック関数を使うと、最初のアニメーションが実行されたら、次のアニメーションを継続して実行します: 

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500,function(){
  $(&#39;#box&#39;).animate({height:600},500);
 });
});

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します このようにシーケンスがあります。

この記事ではjQueryのanimate関数の使い方を簡単に紹介します。

6. 付録


最後に、animate 関数に加えて、js timer setInterval メソッドも使用します: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <style type="text/css">
   body {
    background: url(background1.jpg) no-repeat;
    position: fixed;
   }
   ul li {
    list-style: none;
   }
   .wrap {
    position: relative;
    left: 170px;
    top: 65px;
   }
   .plants1 {
    display: inline-block;
    position: relative;
    left:35px;
   }
   .plants1 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants1 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants2 {
    display: inline-block;
    position: relative;
    left:2px;
   }
   .plants2 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants2 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants3 {
    display: inline-block;
    position: relative;
    left:-40px;
   }
   .plants3 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants3 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
  </style>
 </head>
 <body>
  <div class=&#39;wrap&#39;>
   <ul class=&#39;plants1&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants2&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
 
   </ul>
 
   <ul class=&#39;plants3&#39;>
 
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現します" >
    </li>
   </ul>
  </div>
 </body>
 
 <script type="text/javascript">
 
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };
 
  setInterval(function(){
   var $this = $(&#39;.PB00&#39;).eq(randomNum(17));
   $this.animate({&#39;margin-left&#39; : 1000},2000,function(){
    $this.css({&#39;margin-left&#39; : 0});
   });
  },10);
 
 </script> 
 
</html>

概要

以上がこの記事の全内容です。 , みなさんの参考になれば幸いです 勉強も仕事も役に立ちます。ご質問がございましたら、メッセージを残して PHP 中国語 Web サイトをご利用いただきありがとうございます。

jQuery のアニメーション関数 animate を使用してエンドウ豆の発射効果を実現するその他の関連記事については、PHP 中国語 Web サイトに注目してください。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：DIV の他のアニメーション効果を実装する JQuery の簡単な例次の記事：DIV の他のアニメーション効果を実装する JQuery の簡単な例

関連記事

続きを見る