基于jQuery图片遮罩滑动文字切换特效。这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效。效果图如下：
实现的代码。
html代码：
<div class="bodyCon07">
<div class="teacher">
<div class="teacherPic">
<div class="content">
<img src="data: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="data: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="data: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="data:images/teacher041.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
<div class="txt">
<h3>王老师</h3>
<h4>拥有注会、注税、司法三大执业资格证书</h4>
<p>管理学博士，丰富的海外企管经历，理论实践相结合的教学方法，让公司战略与风险管理课程不再抽象，用企业管理思维帮你破解考试之谜！、重难点把握精准，解析细致；</p>
</div>
</div>
<div class="content">
<img src="data: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="data: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结束-->