jquery实现鼠标经过图片旋转动画展示

css代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* allbrand */
.allbrand .brand{width:390px;height:225px;overflow:hidden;margin:40px auto 0 auto;}
.allbrand .brand a{display:inline;position:relative;float:left;width:120px;height:70px;line-height:70px;text-align:center;color:#fff;font-size:14px;margin:0 6px 5px 0;}
.allbrand .brand a img{position:absolute;left:10px;width:118px;height:68px;border:1px solid #e9e8e8;}
.allbrand .brand a b{display:none;position:absolute;top:36px;left:10px;width:118px;height:0;background:#000;border:1px solid #e9e8e8;cursor:pointer;overflow:hidden;}
</style>

html内容

<div class="allbrand">
	<div class="brand">
		<a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
	<div class="brand">
		<a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
</div>

js代码 不要忘记引用jquery

//品牌翻转
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);

转载请注明：jquery实现鼠标经过图片旋转动画展示 - 前端开发