jquery hover鼠标悬停品牌图片旋转动画展示效果实现源码下载
淘建站为您提供更多_图片代码_广告_旋转_动画,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 333 次
56 积分
var allBrandAnimate = function(t,d){
if(t.find('.brand b').length != 0){
return false;
}
t.find('.brand a').each(function(){
$(this).append('<b>' + $(this).find('img').attr('alt') + '</b>')
});
t.find('.brand a').hover(function(){
$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function(){
$(this).hide().next().show();
$(this).next().animate({
'height':'70px',
'top':'0'
},d);
});
},function(){
$(this).find('b').animate({'height':0,'top':'35px'},d,function(){
$(this).hide().prev().show();
$(this).prev().animate({
'height':'70px',
'top':'0'
},d);
});
});
}
allBrandAnimate($('.allbrand'),80);<div class="allbrand">
<div class="brand">
<a target="_blank" href="http://www.sucaiq.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
</div>
<div class="brand">
<a target="_blank" href="http://www.sucaiq.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
<a target="_blank" href="http://www.sucaiq.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
</div>
</div>

