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 设置SELECT选中项代码
本篇文章主要是对JQUERY 设置SELECT选中项的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jquery ajax结合thinkphp的getjson实现跨域的方法
这篇文章主要介绍了jquery ajax结合thinkphp的getjson实现跨域的方法,结合实例形式对比分析了jQuery ajax实现跨域的具体操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
jQuery事件绑定与解除绑定实现方法
这篇文章主要介绍了jQuery事件绑定与解除绑定实现方法,实例分析了jQuery中bind与unbind方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
jQuery响应enter键的实现思路
当用户在表单里数据完数据后，之间按enter键就可以执行查询或者保存的操作。实现的思路如下
2014-04-04
JQuery选择器用法详解
本文详细讲解了JQuery选择器的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
JQuery AJAX操作代码
jQuery底层AJAX实现，其返回其创建的XMLHttpRequest对象，大多数情况下无需直接操作该函数，除非需要操作不常用的选项，以获得更多的灵活性，这篇文章给大家介绍JQuery AJAX操作代码，感兴趣的朋友一起看看吧
2022-12-12
使用jquery实现select添加实现后台权限添加的效果
使用jquery实现select添加实现后台权限添加的效果，需要的朋友可以参考下。
2011-05-05
jQuery表格插件ParamQuery简单使用方法示例
这篇文章主要介绍了jQuery表格插件ParamQuery简单使用方法示例,大家参考使用吧
2013-12-12
禁止JQuery中的load方法装载IE缓存中文件的方法
JQuery是一个很优秀的JS框架，我们在做ajax项目开发是避免不了使用该框架来实现一些ajax的效果，其中该框架中有一个load()方法，该方法是用来在页面不刷新的情况下动态装载服务器端的文件。
2009-09-09
详解jquery选择器的原理
这篇文章主要介绍了详解jquery选择器的原理的相关资料,就是jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名，需要的朋友可以参考下
2017-08-08