以下是 jQuery图片遮罩滑动文字切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片遮罩滑动文字切换特效 </title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="bodyCon07">
<div class="teacher">
<div class="teacherPic">
<div class="content">
<img src="images/teacher011.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>马老师</h3>
<h4>中国注会师、注册税务师<br/>注会、职称高级讲师</h4>
<p>拥有丰富的教学和实操经验，多年的教书生涯历练了对会计学的精深把握，课程讲授，深入浅出，语言干脆利落，旁征博引，解题思路，逻辑严密，化繁为简，直击要点。</p>
</div>
</div>
<div class="content">
<img src="images/teacher021.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>吴老师</h3>
<h4>中国注会师、注册税务师<br/>金融学博士、注册会计师</h4>
<p>金融学博士，金融、财会专业双重思维带你深入浅出的学习CPA《财管》课程，通俗易懂的授课技巧，便捷、高效的学习方法让你信心百倍的通关CPA！</p>
</div>
</div>
<div class="content">
<img src="images/teacher031.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>刘老师</h3>
<h4>中国注会师、注册税务师<br/>经济师、中级会计师</h4>
<p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！实属京城实力派注册会计师讲师！</p>
</div>
</div>
<div class="content">
<img src="images/teacher041.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>王老师</h3>
<h4>拥有注会、注税、司法三大执业资格证书</h4>
<p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！、重难点把握精准，解析细致；</p>
</div>
</div>
<div class="content">
<img src="images/teacher051.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>贾老师</h3>
<h4>法学硕士<br/>会计职称《经济法》</h4>
<p>独创了考点讲解、重点训练、考前串讲的“三轮教学”法，为希望短期攻克经济法课程的学员指明正确的道路；对学生真诚亲切，认真负责；授课风格幽默，擅长互动式教学!</p>
</div>
</div>
<div class="content">
<img src="images/teacher061.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>杨老师</h3>
<h4>管理学博士</h4>
<p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！</p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<!--java开始-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".content") .hover(function(){
$(this) .children(".txt").stop() .animate({height:"360px"},200);
$(this) .find(".txt h3").stop() .animate({paddingTop:"130"},550);
$(this) .find(".txt p").stop() .show();
},function(){
$(this) .children(".txt").stop() .animate({height:"100px"},200);
$(this) .find(".txt h3").stop().animate({paddingTop:"0px"},550);
$(this) .find(".txt p").stop() .hide();
})
</script>
<!--java结束-->
</body>
</html>
CSS代码(style.css):
@charset "utf-8";/**基本格式开始***************/
*{word-break:break-all;}
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p{margin:0 auto;padding:0px;font-size:12px;font-family:微软雅黑;width:100%;}
ul{list-style:none;}
img,a img{border:none;}
a{text-decoration:none;}
a{color:#000;}
a:hover{text-decoration:none;}
/*老师照片*/
.bodyCon07{background:url(../images/dy_pic091.jpg);width:100%;overflow:hidden;}
.bodyCon07 .teacher{width:1100px;height:530px;position:relative;margin:0 auto;overflow:hidden;background:url(../images/dy_pic09.jpg);}
.bodyCon07 .teacher .teacherPic{width:1100px;height:360px;position:absolute;top:130px;}
.bodyCon07 .teacher .teacherPic .content{width:180px;height:360px;float:left;position:relative;overflow:hidden;margin-left:3px;}
.bodyCon07 .teacher .teacherPic .content .txt{width:156px;height:100px;background:rgba(18,21,44,0.7);position:absolute;left:0px;bottom:0px;padding:0 12px;border-top:2px solid #CB5412;}
.bodyCon07 .teacher .teacherPic .content .txt h3{color:#CB5412;font-size:24px;font-weight:100;margin:10px 0 6px 0;}
.bodyCon07 .teacher .teacherPic h4{color:#fff;font-size:14px;font-weight:100;}
.bodyCon07 .teacher .teacherPic .content .txt p{color:#fff;margin-top:20px;padding-top:12px;border-top:1px solid #CB5412;}
分享到QQ
分享到微博
微信扫一扫
