效果体验：http://hovertree.com/texiao/jquery/7.htm
HTML文件代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> </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, "新宋体"; background: #333; color:white; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; } /* Hides from IE-mac */ *html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ * + html .clearfix { min-height: 1%; } /* hovertreeaction */ .hovertreeaction { width: 981px; margin: 40px auto 0 auto; overflow: hidden; } .hovertreeaction ul { width: 996px; } .hovertreeaction ul li { float: left; margin-right: 14px; margin-bottom: 13px; display: inline; width: 318px; height: 343px; overflow: hidden; position: relative; } .hovertreeaction ul li .photo { width: 318px; height: 343px; overflow: hidden; } .hovertreeaction .rsp { width: 318px; height: 343px; overflow: hidden; position: absolute; background: #000; top: 0px; left: 0px; } .hovertreeaction .text { position: absolute; width: 318px; height: 343px; left: -318px; top: 0px; overflow: hidden; } .hovertreeaction .text h3 { width: 318px; margin-top: 130px; height: 55px; line-height: 55px; text-align: center; color: #FFFFFF; background: #000000; font-family: "microsoft yahei"; font-size: 26px; } #foot_bm a, #foot_bm, p, p a { color: #666; } </style> <div class="hovertreeaction"> <h1>鼠标滑过图片变暗文字链接滑出jQuery特效</h1><br /> <ul class="clearfix"> <li> <div class="photo"><img src="http://hovertree.com/texiao/jquery/7/1.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://hovertree.com/"><h3>HoverTree</h3></a></div> </li> <li> <div class="photo"><img src="http://hovertree.com/texiao/jquery/7/2.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://hovertree.com/menu/jquery/"><h3>何问起</h3></a></div> </li> <li> <div class="photo"><img src="http://hovertree.com/texiao/jquery/7/3.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://keleyi.com/"><h3>柯乐义</h3></a></div> </li> <li> <div class="photo"><img src="http://hovertree.com/texiao/jquery/7/4.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://hovertree.com/menu/csharp/"><h3>C Sharp</h3></a></div> </li> <li> <div class="photo"><img src="http://hovertree.com/texiao/jquery/7/5.jpg" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://tool.keleyi.com/"><h3>Keleyi</h3></a> </div> </li> <li> <div class="photo"><img src="http://hovertree.com/texiao/jquery/7/6.gif" width="318" height="343" /></div> <div class="rsp"></div> <div class="text"><a href="http://hovertree.com/texiao/"><h3>网页特效</h3></a></div> </li> </ul> <div class="clear"></div> <a href="http://hovertree.com/hvtart/bjae/o8b7w9u8.htm" style="color:white;">原文</a> </div> <script> $(document).ready(function(){ $(".hovertreeaction ul li .rsp").hide(); $(".hovertreeaction ul li").hover(function(){ $(this).find(".rsp").stop().fadeTo(500,0.5) $(this).find(".text").stop().animate({left:'0'}, {duration: 500}) },function(){ $(this).find(".rsp").stop().fadeTo(500,0) $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"}) $(this).find(".text").animate({left:'-318'}, {duration: 0}) }); }); </script> </body> </html>
