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

最新推荐文章于 2024-06-28 15:48:41 发布

置顶最骚的就是你

最新推荐文章于 2024-06-28 15:48:41 发布

阅读量1.1k

点赞数

分类专栏： web前端学习文章标签： jquery 鼠标图片鼠标悬浮特效

本文链接：https://blog.csdn.net/libin_1/article/details/50879505

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

button特效：

参考链接：http://www.cnblogs.com/libin-1/p/5779392.html

下载地址：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>