jquery实现腾讯夜学堂功能模块开发
来源：互联网 发布：淘宝客单价计算公式 编辑：程序博客网 时间：2024/05/14 07:55
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jquery实现腾讯夜学堂功能模块开发 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--css-->
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:url('img/bg.jpg')}
.box{width:986px; height:620px; margin:10px auto; background:#E0671E;}
.box .course{width:950px; height:435px; background:white; padding-left:25px; padding-top:25px;}
.box .course ul li{list-style-type:none; width:297px; height:198px; float:left; margin:0px 16px 15px 0px; position:relative;}
.box .course .txt{width:297px; height:45px; background:rgba(6,4,8,0.5); position:absolute; left:0px; bottom:0px; font-family:"微软雅黑"; font-weight:100px;}
.box .course .txt h3{font-size:16px; color:#fff; height:45px; line-height:45px; text-align:center;}
.box .course .txt p{font-size:14px; color:#fff; text-align:center; }
</style>
</head>
<body>
<div class="box">
<img src="img/course.jpg"/>
<div class="course">
<ul>
<li>
<img src="img/class1.jpg"/>
<div class="txt">
<h3>英语教育</h3>
<p>助您成为英语大神</p>
</div>
</li>
<li>
<img src="img/class2.jpg"/>
<div class="txt">
<h3>IT教育</h3>
<p>助您成为IT大神</p>
</div>
</li>
<li>
<img src="img/class3.jpg"/>
<div class="txt">
<h3>职业技能</h3>
<p>助您快速提升职业技能</p>
</div>
</li>
<li>
<img src="img/class4.jpg"/>
<div class="txt">
<h3>中/小学教育</h3>
<p>助您成为学霸</p>
</div>
</li>
<li>
<img src="img/class5.jpg"/>
<div class="txt">
<h3>兴趣爱好</h3>
<p>培养良好的兴趣爱好</p>
</div>
</li>
<li>
<img src="img/class6.jpg"/>
<div class="txt">
<h3>亲子课程</h3>
<p>助您促进与孩子的感情</p>
</div>
</li>
</ul>
</div>
</div>
<!--引入jquery库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".box .course ul li").hover(function(){
$(this).find(".txt").stop().animate({"height" : "198px"}, 300);
$(this).find("h3").stop().animate({"paddingTop" : "60px"}, 300);
}, function(){
$(this).find(".txt").stop().animate({"height" : "45px"}, 300);
$(this).find("h3").stop().animate({"paddingTop" : "0px"}, 300);
});
</script>
</body>
<html>
<head>
<title> jquery实现腾讯夜学堂功能模块开发 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--css-->
<style type="text/css">
*{margin:0px; padding:0px;}
body{background:url('img/bg.jpg')}
.box{width:986px; height:620px; margin:10px auto; background:#E0671E;}
.box .course{width:950px; height:435px; background:white; padding-left:25px; padding-top:25px;}
.box .course ul li{list-style-type:none; width:297px; height:198px; float:left; margin:0px 16px 15px 0px; position:relative;}
.box .course .txt{width:297px; height:45px; background:rgba(6,4,8,0.5); position:absolute; left:0px; bottom:0px; font-family:"微软雅黑"; font-weight:100px;}
.box .course .txt h3{font-size:16px; color:#fff; height:45px; line-height:45px; text-align:center;}
.box .course .txt p{font-size:14px; color:#fff; text-align:center; }
</style>
</head>
<body>
<div class="box">
<img src="img/course.jpg"/>
<div class="course">
<ul>
<li>
<img src="img/class1.jpg"/>
<div class="txt">
<h3>英语教育</h3>
<p>助您成为英语大神</p>
</div>
</li>
<li>
<img src="img/class2.jpg"/>
<div class="txt">
<h3>IT教育</h3>
<p>助您成为IT大神</p>
</div>
</li>
<li>
<img src="img/class3.jpg"/>
<div class="txt">
<h3>职业技能</h3>
<p>助您快速提升职业技能</p>
</div>
</li>
<li>
<img src="img/class4.jpg"/>
<div class="txt">
<h3>中/小学教育</h3>
<p>助您成为学霸</p>
</div>
</li>
<li>
<img src="img/class5.jpg"/>
<div class="txt">
<h3>兴趣爱好</h3>
<p>培养良好的兴趣爱好</p>
</div>
</li>
<li>
<img src="img/class6.jpg"/>
<div class="txt">
<h3>亲子课程</h3>
<p>助您促进与孩子的感情</p>
</div>
</li>
</ul>
</div>
</div>
<!--引入jquery库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".box .course ul li").hover(function(){
$(this).find(".txt").stop().animate({"height" : "198px"}, 300);
$(this).find("h3").stop().animate({"paddingTop" : "60px"}, 300);
}, function(){
$(this).find(".txt").stop().animate({"height" : "45px"}, 300);
$(this).find("h3").stop().animate({"paddingTop" : "0px"}, 300);
});
</script>
</body>
</html>
效果图如下：
0 0
- jquery实现腾讯夜学堂功能模块开发
- jQuery实现统计字数的功能模块
- jquery school(jquery学堂)
- struts2，登录功能模块实现
- Symbian开发之Debug功能模块
- ASP开发之常用功能模块
- 程序开发管理系统功能模块
- corethink功能模块探索开发 小记
- Android 程序自动更新功能模块实现
- Android 程序自动更新功能模块实现
- SSH2验证码功能模块实现
- 功能模块
- 学堂
- Jquery实现仿腾讯微薄的广播发表
- jQuery实现腾讯时间轴事件过程特效
- jQuery实现类似腾讯图片频道的图片播放器
- Jquery实现仿腾讯微薄的广播发表
- WEB开发角度之功能模块--编辑器
- 【MFC】SendMessage与PostMessage
- SDUTACM绝对值排序
- HDU-5044 Tree 树链剖分
- Clustering by fast search and find of density peaks的python实现
- 网页爬虫简单demo
- jquery实现腾讯夜学堂功能模块开发
- 解决centos7最小化版本没有ifconfig命令的个人笔记
- MongoDB在linux系统下定时备份
- 自由落体和平抛运动
- openstack on centos 7.1（Shared File Systems）
- 深入理解HTTP Session
- Leetcode-climbing-stairs
- Map遍历
- 隐马尔可夫模型（三）——隐马尔可夫模型的评估问题(前向算法）
