我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化。他们需要更换其主页上的照片。我想这可能是有趣的事情出现了少许的互动。 这可能有不少方法可以做到这个效果，这一个刚刚进入我的头突然出现，我随它而去了。这个想法是有一个作为背景图像的轮廓，然后，在该组所有完全相同的大小与每个乐队成员的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 }); }); }); 下载地址 http://www.jb51.net/jiaoben/24272.html

　　推荐阅读

　　jQuery学习3：操作元素属性和特性

下面就列出jQuery中提供的方法： 操作元素属性：each(iterator)遍历包装集里所有元素，为各元素分别调用传递进来的迭代器函数。参数iterator 一个函数，为匹配集中的各元素分别调用一次。传递到函数的参数被设置为>>>详细阅读

本文标题：jquery 图片Silhouette Fadeins渐显效果

地址：http://www.17bianji.com/kaifa2/JS/27123.html

 1/2    1