星空网 > 软件开发 > Java

基于jQuery图片遮罩滑动文字切换特效

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

基于jQuery图片遮罩滑动文字切换特效

在线预览    源码下载

实现的代码。

html代码:

 <div class="bodyCon07">    <div class="teacher">      <div class="teacherPic">        <div class="content">          <img src='/images/loading.gif' data-original="images/teacher011.jpg" width="180" height="360"  />          <div class="txt">            <h3>马老师</h3>            <h4>中国注会师、注册税务师<br />注会、职称高级讲师</h4>            <p>拥有丰富的教学和实操经验,多年的教书生涯历练了对会计学的精深把握,课程讲授,深入浅出,语言干脆利落,旁征博引,解题思路,逻辑严密,化繁为简,直击要点。</p>          </div>        </div>        <div class="content">          <img src='/images/loading.gif' data-original="images/teacher021.jpg" width="180" height="360"  />          <div class="txt">            <h3>吴老师</h3>            <h4>中国注会师、注册税务师<br />金融学博士、注册会计师</h4>            <p>金融学博士,金融、财会专业双重思维带你深入浅出的学习CPA《财管》课程,通俗易懂的授课技巧,便捷、高效的学习方法让你信心百倍的通关CPA!</p>          </div>        </div>        <div class="content">          <img src='/images/loading.gif' data-original="images/teacher031.jpg" width="180" height="360"  />          <div class="txt">            <h3>刘老师</h3>            <h4>中国注会师、注册税务师<br />经济师、中级会计师</h4>            <p>管理学博士,丰富的海外企管经历,理论实践相结合的教学方法,让公司战略与风险管理课程不再抽象,用企业管理思维帮你破解考试之谜!实属京城实力派注册会计师讲师!</p>          </div>        </div>        <div class="content">          <img src='/images/loading.gif' data-original="images/teacher041.jpg" width="180" height="360"  />          <div class="txt">            <h3>王老师</h3>            <h4>拥有注会、注税、司法三大执业资格证书</h4>            <p>管理学博士,丰富的海外企管经历,理论实践相结合的教学方法,让公司战略与风险管理课程不再抽象,用企业管理思维帮你破解考试之谜!、重难点把握精准,解析细致;</p>          </div>        </div>        <div class="content">          <img src='/images/loading.gif' data-original="images/teacher051.jpg" width="180" height="360"  />          <div class="txt">            <h3>贾老师</h3>            <h4>法学硕士<br />会计职称《经济法》</h4>            <p>独创了考点讲解、重点训练、考前串讲的“三轮教学”法,为希望短期攻克经济法课程的学员指明正确的道路;对学生真诚亲切,认真负责;授课风格幽默,擅长互动式教学!</p>          </div>        </div>        <div class="content">          <img src='/images/loading.gif' data-original="images/teacher061.jpg" width="180" height="360"  />          <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='/images/loading.gif' data-original="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




原标题:基于jQuery图片遮罩滑动文字切换特效

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

《欧洲站vat:为商家提供的跨境服务》:https://www.kjdsnews.com/a/1322027.html
《欧洲客户开具vat发票的指引》:https://www.kjdsnews.com/a/1322028.html
《欧洲缓缴vat申请指南》:https://www.kjdsnews.com/a/1322029.html
《墨西哥vat税率:为何它仍是一个挑战》:https://www.kjdsnews.com/a/1322030.html
《解析派安盈支付vat税的专业知识》:https://www.kjdsnews.com/a/1322031.html
《解析vat.cmhk的最佳实践》:https://www.kjdsnews.com/a/1322032.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
23点聊电商:“潮起钱塘·境遇未来”2024年跨境电商全平台发展大会圆满完成 :https://www.kjdsnews.com/a/1836652.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流