随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

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

效果体验：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>