jquery 视觉特效(鼠标悬停时依次显示图片)
效果描述:
有几副图片,让他们依次叠加重合。首先显示第一张图片。然后鼠标悬停在上面,边框变化。然后离开,然后第一张淡出,第二张淡入。接着悬停在第二张图片,边框变化,然后离开,第二张淡出,第三张淡入。以此类推。
HTML:
<a href="#" class="image"><img src="pic1.jpg" alt="" width="150" height="150" /></a> <a href="#" class="image"><img src="pic2.jpg" alt="" width="150" height="150"/></a> <a href="#" class="image"><img src="pic3.jpg" alt="" width="150" height="150" /></a> <a href="#" class="image"><img src="pic4.jpg" alt="" width="150" height="150" /></a> <a href="#" class="image"><img src="pic5.jpg" alt="" width="150" height="150"/></a> <a href="#" class="image"><img src="pic6.jpg" alt="" width="150" height="150" /></a>
CSS:
.image{ /*设置定位属性是决定定位,这样才能重合。并任意定义位置,此处我定义TOP:300,LEFT:300*/ position: absolute; top: 300px; left: 300px; }
jquery:
// 首先隐藏全部图片 $('.image').hide(); // 然后显示第一张图片,因为默认的情况是显示最后一张图片的。 $('.image:first').fadeIn('slow'); $('.image').hover(function(){ // 边框颜色 $(this).css('border','1px solid lightskyblue'); }, function(){ // 获取下一个图片对象,如果显示了最后一张图片,此时其next的length为0,如果让它从新显示第一张图片 var next = ($(this).next().length)?$(this).next():$('.image:first'); $(this).css('border',''); // 当前图片对象淡出,此处添加stop方法,为了防止快速在图片上悬浮出入的时候,造成动画反复运动.stop:停止当前动画 $(this).stop().fadeOut('slow'); // 下一张图片对象淡入 next.fadeIn('slow'); });
最终效果:
读者可以自行尝试..图片自选