Silhouette Fadeins 剪影淡出插件实例学习笔记

剪影淡出插件  是一个综合css3,jquery制作的网页效果。

效果在http://css-tricks.com/examples/BandMemberFadeins/

学习到的东西：

html     用a做锚点，监听事件，并将其至于最顶层，切换相应的图片显示，达到效果

<divid="home-photos-box">   背景用图       

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

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

</div>

做图     做出如上的五张图

css      

#home-photos-box { float: left;  352px; background: url(../images/guys-allblack.png) no-repeat; padding: 334px 0 0 0; position: relative; }
定宽，设北京图        background:   url      no-repeat    padding:  334px   用之创建空间       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%;}

//绝对定位,将a 的层设高，定高宽，定位置  top:0    

.single-guy { position: absolute; top:0; left:0; display: none; opacity:0;}

//单张图    top:0; left:0   定到左上角，不出现display: none; opacity:0;

$(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 });
    });

});