您所在的位置:小祥子 » 编程 » JavaScript » 正文

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

时间:2015-07-24 编辑:拎壶充 来源:Cnblogs

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

在线预览    源码下载

实现的代码。

html代码:

 <div class="bodyCon07">
        <div class="teacher">
            <div class="teacherPic">
                <div class="content">
                    <img src="http://www.cnblogs.com/liaohuolin/p/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="http://www.cnblogs.com/liaohuolin/p/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="http://www.cnblogs.com/liaohuolin/p/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="http://www.cnblogs.com/liaohuolin/p/images/teacher041.jpg" width="180" height="360" alt="森科注会,职称高级讲师马贞" />
                    <div class="txt">
                        <h3>王老师</h3>
                        <h4>拥有注会、注税、司法三大执业资格证书</h4>
                        <p>管理学博士,丰富的海外企管经历,理论实践相结合的教学方法,让公司战略与风险管理课程不再抽象,用企业管理思维帮你破解考试之谜!、重难点把握精准,解析细致;</p>
                    </div>
                </div>
                <div class="content">
                    <img src="http://www.cnblogs.com/liaohuolin/p/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="http://www.cnblogs.com/liaohuolin/p/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

关键词:图片 文字 特效