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

来源：互联网发布：linux开启端口命令编辑：程序博客网时间：2024/05/02 18:56
这里写图片描述

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>
0 0