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

剪影淡出插件 是一个综合css3,jquery制作的网页效果。效果在http://css-tricks.com/examples/BandMemberFadeins/学习到的东西：html 用a做锚点，监听事件，并将其至于最顶层，切换相应的图片显示，达到效果

[code]<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

[code]#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;让内部相对定位

[code]#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%;}

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

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

[code]//单张图    top:0; left:0   定到左上角，不出现

display: none; opacity:0;[/code]

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

});