jquery hover鼠标悬停图片特效,当鼠标滑过品牌图片,隐藏的图片会翻转过来。
淘建站为您提供更多_图片代码_缩略图_翻转_品牌,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 363 次
觉得不错,可打赏下作者
免费共享
品牌图片列表
<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>
</div>//品牌翻转
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);

