码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-09-08 23:26:43      阅读:445      评论:0      收藏:0      [点我收藏+]

标签:

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

Web前端资源汇总 : http://www.cnblogs.com/jihua/p/webfront.html

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

标签:

原文地址:http://www.cnblogs.com/jihua/p/piclist.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!