前面我們自己寫了一個(gè)小小的關(guān)于js動(dòng)畫的插件，下面我們來使用之前的框架來完成我們想要的動(dòng)畫效果。我們經(jīng)常在淘寶網(wǎng)中看到，鼠標(biāo)經(jīng)過某一圖片時(shí)，該圖片有從上滾出而又從下滾入的效果，那么那種效果是如何實(shí)現(xiàn)的呢？

首先我們我們完成該效果的html和css代碼，代碼如下：
html部分代碼:

<div id="move">
 <a href="#"><i><img src="images/1.jpg"/></i><p>彩票</p></a>
 <a href="#"><i><img src="images/2.jpg"/></i><p>電影</p></a>
 <a href="#"><i><img src="images/3.jpg"/></i><p>點(diǎn)外賣</p></a>
 <a href="#"><i><img src="images/4.jpg"/></i><p>理財(cái)</p></a>
 <a href="#"><i><img src="images/6.jpg"/></i><p>找服務(wù)</p></a>
 <a href="#"><i><img src="images/7.jpg"/></i><p>音樂</p></a>
 <a href="#"><i><img src="images/8.jpg"/></i><p>水煤電</p></a>
 <a href="#"><i><img src="images/9.jpg"/></i><p>火車票</p></a>
</div> 

css部分代碼:

*{ margin: 0; padding: 0; }
#move{ padding: 10px; width: 400px; background-color: #f4f4f4; margin: 10px auto; border: 1px solid #ccc; border-radius: 10px; }
#move a{ color: #3c3c3c; display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; margin: 10px 17px; position: relative; padding-top: 40px; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; }
#move a i{ position: absolute; top: 10px; left: 0; display: inline-block; width: 100%; text-align: center; fliter:alpha(opacity=100); opacity:1; }
#move a p{ text-align: center; } #move a:hover{ color: #F40; }
#move img{ border: none; }

【用自制動(dòng)畫js插件來實(shí)現(xiàn)】

首先我們應(yīng)該引入我們的插件：foodoir.animate.js，然后我們就可以寫我們想要的動(dòng)畫效果了，代碼如下：

window.onload = function() {
 var oMove = document.getElementById('move');
 var oA = oMove.getElementsByTagName('a');
 for(var i = 0; i < oA.length; i++) {
  oA[i].onmouseenter = function() {
   var _this = this.getElementsByTagName('i')[0];
   startMove(_this, {
    top: -15,
    opacity: 0
   }, function() {
    _this.style.top = 20 + 'px';
    startMove(_this, {
     top: 10,
     opacity: 100
    });
   });
  }
 }
};

注意：在這里我們用的是onmouseenter代替onmouseout，目的是防止鼠標(biāo)事件的多次觸發(fā)。另外在執(zhí)行后一個(gè)函數(shù)之前，我們先讓i的位置到top:20px位置處，這樣我們看到的將是滾動(dòng)效果，代碼：_this.style.top = 20 + 'px';

【用jquery框架來實(shí)現(xiàn)】

我們引入官方j(luò)query框架后，寫如下代碼：

$(document).ready(function() {
 $('#move a').mouseenter(function() {
  $(this).find('i').animate({
   top: "-15px",
   opacity: "0"
  }, 300, function() {
   $(this).css({
    top: "20px"
   })
   $(this).animate({
    top: "10px",
    opacity: "1"
   }, 200)
  })
 })
})

 下面我們通過一張圖片來比較jquery和原生js的異同點(diǎn)，如圖：

不同點(diǎn)：

1、兩種方法的加載方式的寫法不同，在jquery中是$(document).ready()，而在原生js中是window.onload = function(){};

2、由于jquery對(duì)很多方法進(jìn)行了封裝，二者間獲取元素的方法也不同，在jquery中是$(...)，而在原生js中是DOM操作符來獲??；

3、緊跟著jquery通過$(this).find('i')函數(shù)就將所有需要改變的i得到了，在原生js中，我們還需要通過for方法來遍歷所需要的i；

4、在jquery中是mouseenter后接函數(shù)，然戶在函數(shù)中獲取i然后對(duì)i進(jìn)行相應(yīng)操作（我們所看到的代碼中好像不涉及操作是否對(duì)應(yīng)了具體的i），而在原生js中是先獲取到‘i'，然后進(jìn)行onmouseenter事件，其對(duì)應(yīng)的是一個(gè)函數(shù)，且在當(dāng)前函數(shù)中要進(jìn)一步獲取到具體的i；

5、在jquery中是通過animate函數(shù)來控制動(dòng)畫，這個(gè)是jquery封裝好的，而在原生js中是通過startMove函數(shù)來控制動(dòng)畫，而startMove使我們自己封裝在foodoir.animate.js的一個(gè)函數(shù)；

6、雖然都是用json傳值，但是傳的值不一樣（比如說帶單位和沒帶單位），這個(gè)就跟我們自己封裝的插件有關(guān)；

7、在jquery中，還多了一個(gè)數(shù)值300（200），這個(gè)在jquery中表示速度，而我們的插件中，直接對(duì)速度也進(jìn)行了封裝，如果我們?cè)僖ジ淖冞\(yùn)動(dòng)的速度，我們需要自己在foodoir.animate.js中修改； 

相同點(diǎn)：

1、都是在頁面加載完后進(jìn)行

2、對(duì)于同時(shí)運(yùn)動(dòng)，都是采用json傳值

小結(jié)：在這，我們能很明顯的看到，寫jquery代碼比原生js代碼少，且要方便很多。以后可以先研究原生js的實(shí)現(xiàn)方法，再去思考jquery為什么要這樣去實(shí)現(xiàn)，這樣學(xué)的更快，了解的東西越多，出錯(cuò)的概率也會(huì)減少。其次就是對(duì)于我們之前的插件，與jquery進(jìn)行比較后覺得還有很多需要改進(jìn)的地方。

在這里我們的Javascript動(dòng)畫就告一段落了，后面有新的需求會(huì)繼續(xù)更新~

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論