你的位置:首页 > Java教程

[Java教程]基于jQuery图片遮罩滑动文字切换特效


基于jQuery图片遮罩滑动文字切换特效。这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <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结束-->

via:http://www.w2bc.com/article/50862