繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 图片Silhouette Fadeins渐显效果
- Javascript
- 网页中的图片的处理方法与代码
- 用javascript实现jquery的document.ready功能的实现代码
- Exitjs获取DataView中图片文件名
- javascript 加入收藏、设为首页(IE,firefox兼容脚本之家版)
- isArray()函数(JavaScript中对象类型判断的几种方法)
- Javascript 二维数组
- js setattribute批量设置css样式
- Javascript 复制数组实现代码
- extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
- JavaScript 闭包在封装函数时的简单分析
- javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
- JavaScript 字符串操作的几种常见方法
- javascript &&和||运算法的另类使用技巧
- [原创]javascript代码在ie8里报错 document.getElementById(...) 为空或不是对象的解决方法
- js鼠标移动在title中显示图片的效果代码
- JavaScript Alert通用美化类
- javascript 新闻列表排序简单封装
- Javascript 构造函数,公有,私有特权和静态成员定义方法
- javascript 设置某DIV区域内的checkbox复选框
- document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Javascript 中的 jquery 图片Silhouette Fadeins渐显效果
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 92 ::
收藏到网摘: n/a
经常漂流在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 });
});
});
下载地址 http://www.ruanchen.com/iaoben/24272.html
评论 (0) All
