html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery hover鼠标悬停品牌图片旋转动画展示</title>
<meta name="description" content="jquery hover鼠标悬停图片特效，品牌图片列表通过鼠标滑过品牌图片旋转动画展示，鼠标离开品牌图片旋转回来。" />
</head>
<body>
<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: 1090px;
height: 1005px;
overflow: hidden;
margin: 40px auto 0 auto;
}
.allbrand .brand a
{
display: inline;
position: relative;
float: left;
width: 200px;
height:200px;
line-height: 70px;
text-align: center;
color: #fff;
font-size: 14px;
margin: 20px 20px 20px 20px;
}
.allbrand .brand a img
{
position: absolute;
left: 0px;
width: 100%;
height: 100%;
border: 1px solid #e9e8e8;
}
.allbrand .brand a b
{
display: none;
position: absolute;
top: 36px;
left: 0px;
width:200px;
height:200px;
background: #f60;
border: 1px solid #e9e8e8;
cursor: pointer;
overflow: hidden;
}
.allbrand .brand a span
{
display: block;
width: 45px;
height: 45px;
position: absolute;
left: 180px;
top: -20px;
text-align: center;
color: #fff;
line-height: 45px;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.top
{
background: url( "http://s0.husor.cn/image/index/icons1.png" ) no-repeat -246px -6px;
z-index:100;
}
</style>
<div class="allbrand">
<div class="brand">
<a target="_blank" href="http://www.17sucai.com/">
<img alt="兰芝" src="images/20121119104931.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="丝塔芙" src="images/20121015052055.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="玉兰油" src="images/20121123030707.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="高丝" src="images/20121210102224.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="美宝莲" src="images/20121220100203.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="水之密语" src="images/20130106112242.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="曼秀雷敦" src="images/20121220100514.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="JUST BB" src="images/20130106112655.jpg" />
<span class="top">1</span></a>
<a target="_blank" href="http://www.17sucai.com/">
<img alt="玉兰油" src="images/20121123030707.jpg" />
<span class="top">1</span></a>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//品牌翻转
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‘:‘100px‘},d,function(){
$(this).hide().next().next().show();
$(this).next().next().animate({
‘height‘:‘200px‘,
‘top‘:‘0‘
},d);
});
},function(){
$(this).find(‘b‘).animate({‘height‘:0,‘top‘:‘100px‘},d,function(){
$(this).hide().prev().prev().show();
$(this).prev().prev().animate({
‘height‘:‘200px‘,
‘top‘:‘0‘
},d);
});
});
}
allBrandAnimate($(‘.allbrand‘),80);
</script>
</body>
</html>
时间： 2024-10-11 05:50:55