搜索
您的当前位置:首页正文

jquery图片SilhouetteFadeins渐显效果_jquery

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

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


HTML
正如我所说,只是一个div里面有四个图像和过渡区域。所有具有独特的ID和共同的class类名。
代码如下:
















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.gxlcms.com/jiaoben/24272.html

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 浊水半和泥的下一句是什么

    浊水半和泥的下一句:最是萧条处。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 早苗多间草的下一句是什么

    早苗多间草的下一句:浊水半和泥。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 村贫屋舍低的下一句是什么

    村贫屋舍低的下一句:早苗多间草。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 地薄桑麻瘦的下一句是什么

    地薄桑麻瘦的下一句:村贫屋舍低。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 秋日又凄凄的下一句是什么

    秋日又凄凄的下一句:地薄桑麻瘦。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

Top