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; width: 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 });

    });



});