快捷導(dǎo)航

利用jQuery的動(dòng)畫(huà)函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射效果

更新時(shí)間：2016年08月28日 17:16:22 投稿：daisy

本文主要講解jQuery的animate函數(shù)的基本用法，利用動(dòng)畫(huà)函數(shù)animate實(shí)現(xiàn)豌豆發(fā)射的效果，對(duì)于學(xué)習(xí)animate很有幫助，有需要的可以參考借鑒。

先來(lái)看看效果圖

豌豆射手，草坪還有子彈都是現(xiàn)成的圖片，

1. jQuery是庫(kù)還是框架？

jQuery可以說(shuō)是現(xiàn)在最流行的一個(gè)js類(lèi)庫(kù)，而非框架。

之前在知乎上看到有人說(shuō)了這樣一句話：

You call library. Framework calls you.

我深以為然，字面意思大概就是你可以無(wú)約束地使用類(lèi)庫(kù)，卻需要在各種限制條件下使用一個(gè)框架。

我私以為，js 庫(kù)指的是直接和document文檔元素交互的一個(gè)API，你可以直接引用庫(kù)，讓它為你服務(wù)。而框架是偏向于架構(gòu)的層次，你如果想要使用框架，就必須按照它的規(guī)則來(lái)。比如angular.js，它就給你提供方法的同時(shí)還約束了dom文檔結(jié)構(gòu)。

拿Java的三大框架來(lái)說(shuō)，也是如此，你要想使用Spring，就得按照它的步驟來(lái)，就好像一個(gè)房子，鋼筋水泥已經(jīng)弄好，你只需要進(jìn)去裝修就OK了。而庫(kù)，就有點(diǎn)類(lèi)似于StringUtils的韻味，除了它暴露出來(lái)的接口，其他你都無(wú)需關(guān)心，直接調(diào)用就行了。

2. jQuery的animate函數(shù)

animate()函數(shù)用于執(zhí)行一個(gè)基于css屬性的自定義動(dòng)畫(huà)

基本用法：

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

css : 你需要最終實(shí)現(xiàn)的樣式列表

time: 過(guò)渡的時(shí)間

callback: 回調(diào)函數(shù)

animate函數(shù)的作用主要就是實(shí)現(xiàn)一些css樣式的過(guò)渡效果。

3.引入 jQuery

比如，現(xiàn)在我有一個(gè)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='box'></div>
 </body>

 <script>

 </script>

</html>

在上面的代碼中，我們引入了百度提供的jQuery文件。

那么如何快速判斷是否引入成功了呢？提供以下幾個(gè)方法：

1.console.log($);

效果：

這說(shuō)明引入成功了。

2.直接用瀏覽器驗(yàn)證

打開(kāi)你的頁(yè)面，按一下F12，出現(xiàn)這樣的控制臺(tái)，這是瀏覽器自帶的（我這里使用的是谷歌瀏覽器）。

輸入$

回車(chē)！

誒，這樣是不是也可以呢？

4. onmouseover事件

我們來(lái)給div盒子添加一個(gè)鼠標(biāo)劃上去的事件。

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

劃上去：

嗯，最起碼，這說(shuō)明我們到目前為止的代碼都是正確的，我初學(xué)js的時(shí)候就喜歡這樣，讓我感覺(jué)每一行代碼都寫(xiě)得很放心。

5.用animate函數(shù)改變盒子寬度和高度

我們把alert去掉，加上下面的代碼：

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

這表示當(dāng)我把鼠標(biāo)畫(huà)上去的時(shí)候，就改變寬度為600px，過(guò)渡時(shí)間為500毫秒。

如果我們希望在寬度加倍后，令高度也加倍，又該如何做呢？

對(duì)了，用回調(diào)函數(shù)，當(dāng)?shù)谝粋€(gè)動(dòng)畫(huà)執(zhí)行完畢，就繼續(xù)執(zhí)行下一個(gè)動(dòng)畫(huà)：

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

這樣就有了一個(gè)先后順序。

本文簡(jiǎn)單地介紹了一下jQuery animate函數(shù)的使用。

6. 附錄

最后，附上一開(kāi)始案例的代碼，除了animate函數(shù)，還用到了js的定時(shí)器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='wrap'>
   <ul class='plants1'>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>

   </ul>

   <ul class='plants2'>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>

   </ul>

   <ul class='plants3'>

    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
    <li class='plant'>
     <img class='Peashooter' src="img/Peashooter.gif" />
     <img class='PB00' src="img/PB00.gif" />
    </li>
   </ul>
  </div>
 </body>

 <script type="text/javascript">

  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };

  setInterval(function(){
   var $this = $('.PB00').eq(randomNum(17));
   $this.animate({'margin-left' : 1000},2000,function(){
    $this.css({'margin-left' : 0});
   });
  },10);

 </script> 

</html>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)和工作能有所幫助。如果有疑問(wèn)可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: