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');
                });


最终效果:

读者可以自行尝试..图片自选

 

转载于:https://www.cnblogs.com/wenzichiqingwa/archive/2012/09/11/2680173.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值