腳本之家服務器常用軟件

快捷導航

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

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

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

先來看看效果圖

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

1. jQuery是庫還是框架？

jQuery可以說是現(xiàn)在最流行的一個js類庫，而非框架。

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

You call library. Framework calls you.

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

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

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

2. jQuery的animate函數(shù)

animate()函數(shù)用于執(zhí)行一個基于css屬性的自定義動畫

基本用法：

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

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

time: 過渡的時間

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

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

3.引入 jQuery

比如，現(xiàn)在我有一個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文件。

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

1.console.log($);

效果：

這說明引入成功了。

2.直接用瀏覽器驗證

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

輸入$

回車！

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

4. onmouseover事件

我們來給div盒子添加一個鼠標劃上去的事件。

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

劃上去：

嗯，最起碼，這說明我們到目前為止的代碼都是正確的，我初學js的時候就喜歡這樣，讓我感覺每一行代碼都寫得很放心。

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

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

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

這表示當我把鼠標畫上去的時候，就改變寬度為600px，過渡時間為500毫秒。

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

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

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

這樣就有了一個先后順序。

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

6. 附錄

最后，附上一開始案例的代碼，除了animate函數(shù)，還用到了js的定時器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>

總結

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

您可能感興趣的文章: