jquery 图片Silhouette Fadeins渐显效果

更新时间：2010年02月07日 09:18:09 作者：

经常漂流在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 }); 
}); 
}); 

下载地址 https://www.jb51.net/jiaoben/24272.html

您可能感兴趣的文章:

基于jQuery实现简单的折叠菜单效果
这篇文章主要介绍了基于JQuery实现简单的折叠菜单效果，这个功能实现起来很简单，需要的朋友可以参考下
2015-11-11
简要了解jQuery移动web开发的响应式布局设计
这篇文章主要介绍了jQuery移动web开发的响应式布局设计,jQuery是JavaScript世界中最具人气的模块或者说类库,需要的朋友可以参考下
2015-12-12
jQuery实现回到顶部效果
这篇文章主要为大家详细介绍了jQuery实现回到顶部效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
jQuery 选择器用法实例分析【prev + next】
这篇文章主要介绍了jQuery 选择器用法,结合实例形式分析了jQuery选择器prev 与 next基本功能、用法及相关注意事项,需要的朋友可以参考下
2020-05-05
jQuery+Ajax实现无刷新分页
这篇文章主要介绍了jQuery+Ajax实现无刷新分页，本文使用的生成分页的工具条是jquery.pagination.js，感兴趣的小伙伴们可以参考一下
2015-10-10
jquery动感漂浮导航菜单代码分享
这篇文章主要为大家详细介绍了jquery动感漂浮导航菜单特效，菜单可以实现上下浮动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
jquery Easyui快速开发总结
easyui是一种基于jQuery的用户界面插件集合，easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能，本篇文章给大家整理有关jquery Easyui快速开发的技巧，需要的朋友可以参考下
2015-08-08
JQuery实现超链接鼠标提示效果的方法
这篇文章主要介绍了JQuery实现超链接鼠标提示效果的方法,涉及jQuery针对鼠标事件及页面元素样式操作的相关技巧,需要的朋友可以参考下
2015-06-06
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
本篇文章主要是对利用jQuery简单实现产品展示图片左右滚动功能的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
jQuery中:text选择器用法实例
这篇文章主要介绍了jQuery中:text选择器用法,以实例形式较为详细的分析了text选择器的功能、定义及匹配单行文本框的使用技巧,需要的朋友可以参考下
2015-01-01