這可能有不少方法可以做到這個效果，這一個剛剛進入我的頭突然出現，我隨它而去了。這個想法是有一個作為背景圖像的輪廓，然後，在該組所有完全相同的大小與每個樂隊成員的4個圖像。這些圖像默認隱藏。然後，有4個絕對定位的區域上面所在的區域，這是過渡區作用。在jQuery的，我們用他們懸停事件，漸漸顯示相應的圖像。
HTML
正如我所說，只是一個div裡面有四個圖像和過渡區域。所有具有獨特的ID和共同的class類名。
代碼如下:
<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的（包括具體左側位置特殊的東西）。
代碼如下:
#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
當鼠標懸停到對應區域，它對應於圖像的ID和褪色，這時要使用stop() ，以防止在這裡排隊的動畫和我們使用不透明設置。fadeToggle()，當太快和滑鼠移到消退。
代碼如下:
$(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://www.jb51.net/jiaoben/24272.html