在一些圖片網(wǎng)站上我們可以看到在展示圖片的時(shí)候，用鼠標(biāo)輕輕滑上圖片可以看到該圖片的文字介紹信息，其實(shí)用jQuery的animate函數(shù)就可以實(shí)現(xiàn)這樣一個(gè)動(dòng)畫(huà)過(guò)程。

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3>強(qiáng)震摧毀加勒比海小國(guó)海地</h3> 
    <p>今年，戰(zhàn)爭(zhēng)、經(jīng)濟(jì)動(dòng)蕩和自然災(zāi)害席卷全球，制造了無(wú)數(shù)的傷痛；但是，在痛苦的同時(shí)仍有明亮的瞬間存在。</p> 
    <p><a href="#">查看詳情</a></p> 
  </div> 
</div>

我們用一個(gè)DIV.wrap放置一張圖片，以及一個(gè)需要覆蓋的div.cover，cover里面放置圖片的介紹信息，支持任意標(biāo)準(zhǔn)的html內(nèi)容。然后將上述代碼復(fù)制多個(gè)，排列成一組圖片。

CSS

我們需要用CSS將.wrap排成行，并且要將.cover覆蓋層隱藏一部分，當(dāng)鼠標(biāo)滑上去是通過(guò)調(diào)用jquery才顯示出來(lái)。

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; 
background:#e8f5fe; overflow:hidden;} 
.wrap img{position:absolute; top:0; left:0} 
.wrap h3{line-height:30px; font-size:14px; color:#fff} 
.wrap p{line-height:20px} 
.cover{position:absolute; background:#000; height:120px; width:100%; 
padding:3px; top:170px; } 

值得注意的是，隱藏.cover一部分使用了position:absolute絕對(duì)定位，將覆蓋層.cover只顯示標(biāo)題部分，只需設(shè)置top:170px，因?yàn)檫@個(gè).wrap的高度是200px，而標(biāo)題h3的高度為30px，相減得之。

jQuery

首先我將覆蓋層的透明度設(shè)置為0.8，然后當(dāng)鼠標(biāo)滑上圖片時(shí)，使用hover函數(shù)來(lái)調(diào)用animate動(dòng)畫(huà)。

$(function(){ 
  $(".cover").css("opacity",.8); 
  $(".wrap").hover(function(){ 
    $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160}); 
  },function(){ 
    $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160}); 
  }); 
}); 

animate函數(shù)是jQuery用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象。這個(gè)對(duì)象中每個(gè)屬性都表示一個(gè)可以變化的樣式屬性（如“height”、“top”或“opacity”）。而每個(gè)屬性的值表示這個(gè)樣式屬性到多少時(shí)動(dòng)畫(huà)結(jié)束。如果是一個(gè)數(shù)值，樣式屬性就會(huì)從當(dāng)前的值漸變到指定的值。如果使用的是“hide”、“show”或“toggle”這樣的字符串值，則會(huì)為該屬性調(diào)用默認(rèn)的動(dòng)畫(huà)形式。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡、

最新評(píng)論