自己动手丰衣足食之鼠标悬浮特效

  1. 云栖社区>
  2. 博客>
  3. 正文

自己动手丰衣足食之鼠标悬浮特效

cometwo123 2016-03-13 19:24:00 浏览1047

这里写图片描述
这里写图片描述
button特效:
这里写图片描述

下载地址:http://download.csdn.net/detail/cometwo/9460245

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <title>基于jquery hover图片遮罩层滑动 </title>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
            }

            .con {
                width: 950px;
                height: 435px;
                background: pink;
                margin: 0px auto;
                border: 1px solid blue;
                padding-left: 25px;
                padding-top: 25px;
            }

            .con ul li {
                width: 297px;
                height: 198px;
                float: left;
                margin-right: 15px;
                margin-bottom: 15px;
                position: relative;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid red;
            }

            .txt {
                width: 297px;
                height: 45px;
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
                font-family: "微软雅黑";
            }

            .txt h3 {
                font-size: 20px;
                font-weight: 100;
                height: 45px;
                text-align: center;
                line-height: 45px;
                border: 1px solid blue;
            }

            .txt p {
                font-size: 14px;
                text-align: center;
                border: 1px solid green;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(".con ul li").hover(function() {
                    $(this).find(".txt").stop().animate({
                        height: "198px"
                    }, 400);
                    $(this).find(".txt h3").stop().animate({
                        paddingTop: "60px"
                    }, 400);
                }, function() {
                    $(this).find(".txt").stop().animate({
                        height: "45px"
                    }, 400);
                    $(this).find(".txt h3").stop().animate({
                        paddingTop: "0px"
                    }, 400);
                })
            })
        </script>
    </head>

    <body>

        <div class="con">
            <ul>
                <li>
                    <img src="images/class1.jpg" />
                    <div class="txt">
                        <h3>IT培训</h3>
                        <p>为您铺就成为IT大神的在线学习之路</p>
                    </div>
                </li>
                <li>
                    <img src="images/class2.jpg" />
                    <div class="txt">
                        <h3>语言学习</h3>
                        <p>英语、韩语、日语各类语言课程一网打尽</p>
                    </div>
                </li>
                <li>
                    <img src="images/class3.jpg" />
                    <div class="txt">
                        <h3>职业技能</h3>
                        <p>传授会计师、建筑师等各类考证学习宝典</p>
                    </div>
                </li>
                <li>
                    <img src="images/class4.jpg" />
                    <div class="txt">
                        <h3>中小学/大学</h3>
                        <p>小学、初中、高中各科课程在线辅导</p>
                    </div>
                </li>
                <li>
                    <img src="images/class5.jpg" />
                    <div class="txt">
                        <h3>兴趣爱好</h3>
                        <p>吉他、摄影等各类兴趣教程让你成为生活达人</p>
                    </div>
                </li>
                <li>
                    <img src="images/class6.jpg" />
                    <div class="txt">
                        <h3>亲子学堂</h3>
                        <p>教你如何和宝宝一起成长</p>
                    </div>
                </li>
            </ul>

        </div>

    </body>

</html>