圖片Silhouette Fadeins漸顯效果【譯自css-tricks】


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

      我的樂隊有幾個朋友剛剛經歷了一場小型的成員陣容的變化。他們需要更換其主頁上的照片。我想這可能是有趣的事情出現了少許的互動。

 

    這可能有不少方法可以做到這個效果,這一個剛剛進入我的頭突然出現,我隨它而去了。這個想法是有一個作為背景圖像的輪廓,然后,在該組所有完全相同的大小與每個樂隊成員的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 });
    });
});

 

 查看demo     下載例子        原文地址


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com