jQuery —— 导航效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        img {
            display: block;
            border: 0;
        }

        .wrapper {
            width: 752px;
            border: 1px solid #ccc;
            padding: 10px 0;
            font-family: arial;
            /*overflow: hidden;*/
            margin: 100px auto;
        }

        .clearfix:after {
            content: '.';
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .wrapper li {
            float: left;
            margin: 0 10px 10px 0;
            width: 178px;
            height: 125px;
            overflow: hidden;
            position: relative;
        }

        .wrapper li div, .wrapper li p {
            width: 178px;
            height: 25px;
            position: absolute;
            font-size: 14px;
            text-align: center;
            line-height: 25px;
            color: white;
            left: 0;
            bottom: -25px;
            _bottom: -26px;
        }

        .wrapper li div {
            background-color: #000;
        }

        .wrapper li p {
            background: url(imgs/bg.png) no-repeat 5px 0;
        }

    </style>
    <script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper li")
                // 尾部添加一个div和p标签
                .append("<div></div><p>百度一下，你就知道</p>")
                .children("div")
                // 设置透明度
                .fadeTo(500, 0.5)
                .next("p")
                // 遍历p，添加参数，获得索引值和对象
                .each(function (index, ele) {
                    var y = index * 25
                // 设置精灵图位置
                    $(ele).css("background-position", "5px -" + y + "px")
                });
                // 自定义动画，使用stop方法，阻止序列执行动画
            $(".wrapper li").mouseenter(function () {
                $(this).children("div,p").stop().animate({
                    "bottom": "0"
                }, 300);
            }).mouseleave(function () {
                $(this).children("div,p").stop().animate({
                    "bottom": "-25px"
                }, 300);
            })
        });
    </script>
</head>
<body>
<div class="wrapper clearfix">
    <ul>
        <li><a href="###">![](imgs/01.jpg)</a>
        </li>
        <li><a href="###">![](imgs/02.jpg)</a>
        </li>
        <li><a href="###">![](imgs/03.jpg)</a>
        </li>
        <li><a href="###">![](imgs/04.jpg)</a>
        </li>
        <li><a href="###">![](imgs/05.jpg)</a>
        </li>
        <li><a href="###">![](imgs/06.jpg)</a>
        </li>
        <li><a href="###">![](imgs/07.jpg)</a>
        </li>
        <li><a href="###">![](imgs/08.jpg)</a>
        </li>
    </ul>
</div>
</body>
</html>
jQuery —— 导航效果

推荐阅读更多精彩内容
