JQ酷鼠标的图片滚动效果后

只需10多行代码就可以实现一个很酷的图片滚动代码,达到这个效果并不难,只要构思好,一切都很好,不用说,直接在代码上看到结果!

HTML结构:
复制代码代码如下所示:












CSS代码:
复制代码代码如下所示:
*边距:0;填充:0;}
。表{宽度:640px;保证金:100px汽车;边框1px solid # DDD;溢出:隐藏;}
列表里。{浮动:左;宽度:150px;高度:80px;溢出:隐藏;列表样式:无;保证金:5px;显示:内联;位置:相对;}
img {浮动。名单里:左;宽度:150px;高度:80px;边界:无;}
列表里。{位置:绝对;左:0;最高:0;宽度:150px;身高:0;背景:# 999;边缘上:40px;显示:内联;显示:内联;边距:40px;;;

JQ代码(注意的JQ库的介绍):
复制代码代码如下所示:
$(函数(){())
Hover(函数(){)
$(这)。儿童(A,IMG)停止();
$(这)。儿童('img)。停止()。动画({ 'margintop:40、'height:0 },200、函数(){)
$(这),兄弟姐妹('a')。停止()。动画({ 'height:80、'margintop:0 },200);
});

}函数(){()
$(这)。儿童(A,IMG)停止();
$(这)。儿童('a')。停止()。动画({ 'height:0、'margintop:40 },200、函数(){)
$(这),兄弟姐妹('img)。停止()。动画({ 'margintop:0、'height:80 },200);

});
});

});

这是一个非常简单的JQ代码亲戚们,不妨抄下来看看诵经的效果!