jquery 圖片Silhouette Fadeins漸顯效果
2019-11-21 00:46:12
供稿：網友
我的樂隊有幾個朋友剛剛經歷了一場小型的成員陣容的變化。他們需要更換其主頁上的照片。我想這可能是有趣的事情出現了少許的互動。 
%20這可能有不少方法可以做到這個效果，這一個剛剛進入我的頭突然出現，我隨它而去了。這個想法是有一個作為背景圖像的輪廓，然后，在該組所有完全相同的大小與每個樂隊成員的4個圖像。這些圖像默認隱藏。然后，有4個絕對定位的區域上面所在的區域，這是過渡區作用。在jQuery的，我們用他們懸停事件，漸漸顯示相應的圖像。
HTML%20
正如我所說，只是一個div里面有四個圖像和過渡區域。所有具有獨特的ID和共同的class類名。%20
復制代碼%20代碼如下:
%20
<div%20id="home-photos-box">%20
<a%20id="aller"%20href="#aller"%20class="home-roll-box"></a>%20
<a%20id="neil"%20href="#neil"%20class="home-roll-box"></a>%20
<a%20id="aaron"%20href="#aaron"%20class="home-roll-box"></a>%20
<a%20id="scott"%20href="#scott"%20class="home-roll-box"></a>%20
<img%20src="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 });
});
});
下載地址
//m.survivalescaperooms.com/jiaoben/24272.html
