您的位置：首页 > 其它

[置顶] 自己动手丰衣足食之鼠标悬浮特效

2016-03-13 19:24 330 查看

button特效：

参考链接：http://www.cnblogs.com/libin-1/p/5779392.html

下载地址：http://download.csdn.net/detail/cometwo/9460245

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<title>基于jquery hover图片遮罩层滑动 </title>

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}

.con {
width: 950px;
height: 435px;
background: pink;
margin: 0px auto;
border: 1px solid blue;
padding-left: 25px;
padding-top: 25px;
}

.con ul li {
width: 297px;
height: 198px;
float: left;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid red;
}

.txt {
width: 297px;
height: 45px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
bottom: 0;
color: #fff;
font-family: "微软雅黑";
}

.txt h3 {
font-size: 20px;
font-weight: 100;
height: 45px;
text-align: center;
line-height: 45px;
border: 1px solid blue;
}

.txt p {
font-size: 14px;
text-align: center;
border: 1px solid green;
}
</style>
<script type="text/javascript">
$(function() {
$(".con ul li").hover(function() {
$(this).find(".txt").stop().animate({
height: "198px"
}, 400);
$(this).find(".txt h3").stop().animate({
paddingTop: "60px"
}, 400);
}, function() {
$(this).find(".txt").stop().animate({
height: "45px"
}, 400);
$(this).find(".txt h3").stop().animate({
paddingTop: "0px"
}, 400);
})
})
</script>
</head>

<body>

<div class="con">
<ul>
<li>
<img src="images/class1.jpg" />
<div class="txt">
<h3>IT培训</h3>
<p>为您铺就成为IT大神的在线学习之路</p>
</div>
</li>
<li>
<img src="images/class2.jpg" />
<div class="txt">
<h3>语言学习</h3>
<p>英语、韩语、日语各类语言课程一网打尽</p>
</div>
</li>
<li>
<img src="images/class3.jpg" />
<div class="txt">
<h3>职业技能</h3>
<p>传授会计师、建筑师等各类考证学习宝典</p>
</div>
</li>
<li>
<img src="images/class4.jpg" />
<div class="txt">
<h3>中小学/大学</h3>
<p>小学、初中、高中各科课程在线辅导</p>
</div>
</li>
<li>
<img src="images/class5.jpg" />
<div class="txt">
<h3>兴趣爱好</h3>
<p>吉他、摄影等各类兴趣教程让你成为生活达人</p>
</div>
</li>
<li>
<img src="images/class6.jpg" />
<div class="txt">
<h3>亲子学堂</h3>
<p>教你如何和宝宝一起成长</p>
</div>
</li>
</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航