某网站品牌列表的效果 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 12px;
            text-align: center;
        }
        a
        {
            color: #04D;
            text-decoration: none;
        }
        a:hover
        {
            color: #F50;
            text-decoration: underline;
        }
        .SubCategoryBox
        {
            width: 600px;
            margin: 0 auto; /*设置固定宽度 居中*/
            text-align: center;
            margin-top: 40px;
        }
        .SubCategoryBox ul
        {
            list-style: none;
        }
        .SubCategoryBox ul li
        {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }
        .showmore
        {
            clear: both;
            text-align: center;
            padding-top: 10px;
        }
        .showmore a
        {
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAA;
        }
        .showmore a span
        {
            padding-left: 15px;
            background: url(img/down.gif) no-repeat 0 0;
        }
        .promoted a
        {
            color: #F50;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            //初始化状态
            var category = $("#divCategory ul li:gt(5):not(:last)");
            category.hide();
            //获取按钮
            var showbtn = $("div.showmore  a");
            showbtn.click(function() {
                if (category.is(":hidden")) {
                    //category.show("slow");
                    category.slideDown();
                    $("div.showmore a span").css("background", "url(img/up.gif) no-repeat 0 0").text("精简全部品牌");
                    $("#divCategory ul li").filter(":contains('佳能'),:contains('卡西欧'),:contains('奥林巴斯')").addClass("promoted");
                } else {
                    //category.hide("slow");
                    category.slideUp();
                    $("div.showmore a span").css("background", "url(img/down.gif) no-repeat 0 0").text("显示全部品牌");
                    $("#divCategory ul li").removeClass();
                }
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="SubCategoryBox" id="divCategory">
        <ul>
            <li><a href="#">佳能</a><i>(30440) </i></li>
            <li><a href="#">索尼</a><i>(27220) </i></li>
            <li><a href="#">三星</a><i>(20808) </i></li>
            <li><a href="#">尼康</a><i>(17821) </i></li>
            <li><a href="#">松下</a><i>(12289) </i></li>
            <li><a href="#">卡西欧</a><i>(8242) </i></li>
            <li><a href="#">富士</a><i>(14894) </i></li>
            <li><a href="#">柯达</a><i>(9520) </i></li>
            <li><a href="#">宾得</a><i>(2195) </i></li>
            <li><a href="#">理光</a><i>(4114) </i></li>
            <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li><a href="#">明基</a><i>(1466) </i></li>
            <li><a href="#">爱国者</a><i>(3091) </i></li>
            <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        <div class="showmore">
            <a href="index.html"><span>显示全部品牌</span></a>
        </div>
    </div>
    </form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 12px;
            text-align: center;
        }
        a
        {
            color: #04D;
            text-decoration: none;
        }
        a:hover
        {
            color: #F50;
            text-decoration: underline;
        }
        .SubCategoryBox
        {
            width: 600px;
            margin: 0 auto; /*设置固定宽度 居中*/
            text-align: center;
            margin-top: 40px;
        }
        .SubCategoryBox ul
        {
            list-style: none;
        }
        .SubCategoryBox ul li
        {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }
        .showmore
        {
            clear: both;
            text-align: center;
            padding-top: 10px;
        }
        .showmore a
        {
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAA;
        }
        .showmore a span
        {
            padding-left: 15px;
            background: url(img/down.gif) no-repeat 0 0;
        }
        .promoted a
        {
            color: #F50;
        }
    </style>

    <script type="text/javascript">
        $(function() {
            //初始化状态
            var category = $("#divCategory ul li:gt(5):not(:last)");
            category.hide();
            //获取按钮
            var showbtn = $("div.showmore  a");
            showbtn.click(function() {
                if (category.is(":hidden")) {
                    //category.show("slow");
                    category.slideDown();
                    $("div.showmore a span").css("background", "url(img/up.gif) no-repeat 0 0").text("精简全部品牌");
                    $("#divCategory ul li").filter(":contains('佳能'),:contains('卡西欧'),:contains('奥林巴斯')").addClass("promoted");
                } else {
                    //category.hide("slow");
                    category.slideUp();
                    $("div.showmore a span").css("background", "url(img/down.gif) no-repeat 0 0").text("显示全部品牌");
                    $("#divCategory ul li").removeClass();
                }
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="SubCategoryBox" id="divCategory">
        <ul>
            <li><a href="#">佳能</a><i>(30440) </i></li>
            <li><a href="#">索尼</a><i>(27220) </i></li>
            <li><a href="#">三星</a><i>(20808) </i></li>
            <li><a href="#">尼康</a><i>(17821) </i></li>
            <li><a href="#">松下</a><i>(12289) </i></li>
            <li><a href="#">卡西欧</a><i>(8242) </i></li>
            <li><a href="#">富士</a><i>(14894) </i></li>
            <li><a href="#">柯达</a><i>(9520) </i></li>
            <li><a href="#">宾得</a><i>(2195) </i></li>
            <li><a href="#">理光</a><i>(4114) </i></li>
            <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li><a href="#">明基</a><i>(1466) </i></li>
            <li><a href="#">爱国者</a><i>(3091) </i></li>
            <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        <div class="showmore">
            <a href="index.html"><span>显示全部品牌</span></a>
        </div>
    </div>
    </form>
</body>
</html>

posted on 2013-01-18 11:38  .NET每天一小步  阅读(113)  评论(0)    收藏  举报