<!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> </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;} .brand a{ display: block; float: left; margin: 20px; width: 180px; height: 240px; text-align: center; position: relative; } .brand img{ width: 180px; height: 240px; } .brand .info{ display: none; background-color: #f0f0f0; color: #369242; } .vertical .info{ width: 0; height: 240px; margin: 0 auto; } .horizontal img{ position: absolute; top: 0; left: 0; } .horizontal .info{ width: 180px; height: 0; top: 120px; position: absolute; left: 0; } </style> <div style="720px;margin:0 auto;"> <div id="vertical" class="brand vertical"> <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/1.jpg" /><div class="info">高圆圆</div></a> <a target="_blank" href="#"><img lta="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/2.jpg" /><div class="info">高圆圆</div></a> <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/3.jpg" /><div class="info">高圆圆</div></a> </div> <div style="clear:both;"></div> <div id="horizontal" class="brand horizontal"> <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/1.jpg" /><div class="info">高圆圆</div></a> <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/2.jpg" /><div class="info">高圆圆</div></a> <a target="_blank" href="#"><img alt="" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/images/3.jpg" /><div class="info">高圆圆</div></a> </div> </div> <script type="text/javascript" src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201407/jiaoben2559/js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> //品牌翻转 var turn = function(target,time,opts){ target.find('a').hover(function(){ $(this).find('img').stop().animate(opts[0],time,function(){ $(this).hide().next().show(); $(this).next().animate(opts[1],time); }); },function(){ $(this).find('.info').animate(opts[0],time,function(){ $(this).hide().prev().show(); $(this).prev().animate(opts[1],time); }); }); } var verticalOpts = [{'width':0},{'width':'180px'}]; turn($('#vertical'),100,verticalOpts); var horizontalOpts = [{'height':0,'top':'120px'},{'height':'240px','top':0}]; turn($('#horizontal'),100,horizontalOpts); </script> <div align="center" style="clear:both;font-size:12px;color:#666;"> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p> </div> </div> </body> </html>