<!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特效</title>
<style type="text/css">
<!--
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
#container{ width:960px; text-align:left; margin:0 auto; }
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11; text-decoration:underline;}
.layout_main{ width:728px; margin:20px auto;}
.content_bottom UL LI {FLOAT: left}
.content_bottom UL LI.brand_item {WIDTH: 182px; HEIGHT: 182px}
.brand_item A {DISPLAY: block; WIDTH: 168px; HEIGHT: 169px}
.brand_item A:hover {TEXT-DECORATION: none}
.brand_item A.brand_name {BORDER-RIGHT: #b69d6b 1px solid; BORDER-TOP: #b69d6b 1px solid; BORDER-LEFT: #b69d6b 1px solid; BORDER-BOTTOM: #b69d6b 1px solid}
.brand_item A.brand_detail {BORDER-RIGHT: #daa900 2px solid; BORDER-TOP: #daa900 2px solid; BORDER-LEFT: #daa900 2px solid; BORDER-BOTTOM: #daa900 2px solid}
.brand_item A SPAN {DISPLAY: block; MARGIN-LEFT: 1px; WIDTH: 166px; PADDING-TOP: 10px; HEIGHT: 20px; TEXT-ALIGN: center}
A.brand_name SPAN {COLOR: #7f5400; BACKGROUND-COLOR: #e0dbcd}
A.brand_detail SPAN {COLOR: #fff; BACKGROUND-COLOR: #8d5303}
-->
</style>
<SCRIPT src="js/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(document).ready(function(){
// 判断img轮转，实现a跳转
// 推荐品牌滑动翻转效果
brandPicTurn();
});
function brandPicTurn(){
$(".brand_detail").hide();
$(".brand_item").hover(
function(){
$(this).children(".brand_name").hide();
$(this).children(".brand_detail").show();
}
, function(){
$(this).children(".brand_detail").hide();
$(this).children(".brand_name").show();
}
);
}
</SCRIPT>
</head>
<body>
<DIV class="layout_main">
<DIV class="content_bottom" >
<UL class="ui_brands">
<LI class=brand_item>
<A class="brand_name" href="#" target=_blank>
<IMG src="images/pic_jy_name.gif">
<SPAN>九阳 Joyoung</SPAN>
</A>
<A class="brand_detail" href="#" target=_blank>
<IMG src="images/pic_jy_product.gif">
<SPAN>九阳 Joyoung</SPAN>
</A>
</LI>
<LI class=brand_item>
<A class="brand_name" href="#" target=_blank>
<IMG src="images/pic_sx_name.gif">
<SPAN>三星 Samsung</SPAN>
</A>
<A class="brand_detail" href="#" target=_blank>
<IMG src="images/pic_sx_product.gif">
<SPAN>三星 Samsung</SPAN>
</A>
</LI>
<LI class=brand_item>
<A class="brand_name" href="#" target=_blank>
<IMG src="images/pic_oly_name.gif">
<SPAN>欧莱雅 LOREAL</SPAN>
</A>
<A class=brand_detail href="#" target=_blank>
<IMG src="images/pic_oly_product.gif">
<SPAN>欧莱雅 LOREAL</SPAN>
</A>
</LI>
<LI class=brand_item>
<A class=brand_name href="#" target=_blank>
<IMG src="images/pic_jn_name.gif">
<SPAN>佳能 Cannon </SPAN>
</A>
<A class=brand_detail href="#" target=_blank>
<IMG src="images/pic_jn_product.gif">
<SPAN>佳能 Cannon </SPAN>
</A>
</LI>
</UL>
</DIV>
</DIV>
<div style="clear:both"></div>
</body>
</html>
源码下载：点击下载