标签：
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>
标签：
原文地址：http://www.cnblogs.com/engine/p/4305199.html
