zoukankan      html  css  js  c++  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

  • 相关阅读:
    高级特性(7)- 高级AWT
    洛谷 P1948 [USACO08JAN]电话线Telephone Lines
    洛谷 P2015 二叉苹果树
    洛谷 P2014 选课
    洛谷 P1560 [USACO5.2]蜗牛的旅行Snail Trails(不明原因的scanf错误)
    cogs 10. 信号无错传输
    cogs 9. 中心台站建设。。。
    洛谷 P1731 生日蛋糕
    洛谷 P1092 虫食算
    洛谷 P1034 矩形覆盖
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4672397.html
Copyright © 2011-2022 走看看