鼠标滑过图片变暗文字链接滑出jQuery特效

2024-04-27 15:01:12

字体：大中小

来源：转载

供稿：网友

效果体验：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://s1.vevb.com/20151016/d3sze4y2fly39.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>