快捷導(dǎo)航

jquery 圖片Silhouette Fadeins漸顯效果

更新時(shí)間：2010年02月07日 09:18:09 作者：

經(jīng)常漂流在css-tricks看到這篇文章，就順便搬了過來，下面譯文都是用css-tricks口吻來描述的。

我的樂隊(duì)有幾個(gè)朋友剛剛經(jīng)歷了一場小型的成員陣容的變化。他們需要更換其主頁上的照片。我想這可能是有趣的事情出現(xiàn)了少許的互動(dòng)。

這可能有不少方法可以做到這個(gè)效果，這一個(gè)剛剛進(jìn)入我的頭突然出現(xiàn)，我隨它而去了。這個(gè)想法是有一個(gè)作為背景圖像的輪廓，然后，在該組所有完全相同的大小與每個(gè)樂隊(duì)成員的4個(gè)圖像。這些圖像默認(rèn)隱藏。然后，有4個(gè)絕對(duì)定位的區(qū)域上面所在的區(qū)域，這是過渡區(qū)作用。在jQuery的，我們用他們懸停事件，漸漸顯示相應(yīng)的圖像。

HTML
正如我所說，只是一個(gè)div里面有四個(gè)圖像和過渡區(qū)域。所有具有獨(dú)特的ID和共同的class類名。

復(fù)制代碼代碼如下:

 
<div id="home-photos-box"> 

<a id="aller" href="#aller" class="home-roll-box"></a> 
<a id="neil" href="#neil" class="home-roll-box"></a> 
<a id="aaron" href="#aaron" class="home-roll-box"></a> 
<a id="scott" href="#scott" class="home-roll-box"></a> 

<img src="images/guys-aller.jpg" alt="" id="image-aller" class="single-guy" /> 
<img src="images/guys-neil.jpg" alt="" id="image-neil" class="single-guy" /> 
<img src="images/guys-aaron.jpg" alt="" id="image-aaron" class="single-guy" /> 
<img src="images/guys-scott.jpg" alt="" id="image-scott" class="single-guy" /> 

</div> 

CSS
由類名涵蓋共性（如位置樣式），其次是ID的（包括具體左側(cè)位置特殊的東西）。

復(fù)制代碼代碼如下:

 
#home-photos-box { float: left; width: 352px; background: url(../images/guys-allblack.png) no-repeat; padding: 334px 0 0 0; position: relative; } 
#aller { left: 0; } 
#neil { left: 25%; } 
#aaron { left: 50%; } 
#scott { left: 75%; } 
.home-roll-box { position: absolute; z-index: 1000; display: block; height: 334px; top: 0; width: 25%; } 
.single-guy { position: absolute; top: 0; left: 0; display: none; opacity: 0; } 

jQuery
當(dāng)鼠標(biāo)懸停到對(duì)應(yīng)區(qū)域，它對(duì)應(yīng)于圖像的ID和褪色，這時(shí)要使用stop() ，以防止在這里排隊(duì)的動(dòng)畫和我們使用不透明設(shè)置。fadeToggle()，當(dāng)太快和滑鼠移到消退。

復(fù)制代碼代碼如下:

 
$(function() { 
var name = ""; 
$(".home-roll-box").hover(function() { 
name = $(this).attr("id"); 
$("#image-"+name).stop().show().animate({ opacity: 1 }); 
}, function() { 
name = $(this).attr("id"); 
$("#image-"+name).stop().animate({ opacity: 0 }); 
}); 
}); 

下載地址 http://m.fzitv.net/jiaoben/24272.html

您可能感興趣的文章: