杭州网站排名优化公司,微信小程序注册需要钱吗,建设项目环境影响登记网站天津,南通教育平台网站建设效果描述#xff1a; 有几副图片#xff0c;让他们依次叠加重合。首先显示第一张图片。然后鼠标悬停在上面#xff0c;边框变化。然后离开#xff0c;然后第一张淡出#xff0c;第二张淡入。接着悬停在第二张图片#xff0c;边框变化#xff0c;然后离开#xff0c;第二…效果描述 有几副图片让他们依次叠加重合。首先显示第一张图片。然后鼠标悬停在上面边框变化。然后离开然后第一张淡出第二张淡入。接着悬停在第二张图片边框变化然后离开第二张淡出第三张淡入。以此类推。 HTML: a href# classimageimg srcpic1.jpg alt width150 height150 //a
a href# classimageimg srcpic2.jpg alt width150 height150//a
a href# classimageimg srcpic3.jpg alt width150 height150 //a
a href# classimageimg srcpic4.jpg alt width150 height150 //a
a href# classimageimg srcpic5.jpg alt width150 height150//a
a href# classimageimg srcpic6.jpg alt width150 height150 //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
