jquery 图片Silhouette Fadeins渐显效果


Posted in Javascript onFebruary 07, 2010

我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化。他们需要更换其主页上的照片。我想这可能是有趣的事情出现了少许的互动。

jquery 图片Silhouette Fadeins渐显效果

 

    这可能有不少方法可以做到这个效果,这一个刚刚进入我的头突然出现,我随它而去了。这个想法是有一个作为背景图像的轮廓,然后,在该组所有完全相同的大小与每个乐队成员的4个图像。这些图像默认隐藏。然后,有4个绝对定位的区域上面所在的区域,这是过渡区作用。在jQuery的,我们用他们悬停事件,渐渐显示相应的图像。

jquery 图片Silhouette Fadeins渐显效果
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://3water.com/jiaoben/24272.html
Javascript 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 #Javascript
jquery 应用代码 方便的排序功能
Feb 06 #Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 #Javascript
javascript小数计算出现近似值的解决办法
Feb 06 #Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 #Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 #Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 #Javascript
You might like
apache配置虚拟主机的方法详解
2013/06/17 PHP
解析link_mysql的php版
2013/06/30 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Javascript 继承实现例子
2009/08/12 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python实现简单成绩录入系统
2019/09/19 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python sorted排序方法如何实现
2020/03/31 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python -v 报错问题的解决方法
2020/09/15 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
网上签名寄语活动留言
2014/01/18 职场文书
初一科学教学反思
2014/01/27 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
辞职信怎么写
2015/02/27 职场文书