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 相关文章推荐
javascript控制swfObject应用介绍
Nov 29 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Vue声明式渲染详解
May 17 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
LayUi数据表格自定义赋值方式
Oct 26 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
一个用于网络的工具函数库
2006/10/09 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python列表去重的二种方法
2014/02/14 Python
Python实现的科学计算器功能示例
2017/08/04 Python
python 求10个数的平均数实例
2019/12/16 Python
浅谈Python协程
2020/06/17 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
特教教师先进事迹
2014/05/21 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2014年市场部工作总结
2014/11/25 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
从原生JavaScript到React深入理解
2022/07/23 Javascript