翻页效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript" src="jquery1.7.js"></script>

    <title></title>

    <style type="text/css">

        ul {

            float: left;

            height: 300px;

            width: 450px;

        }



        li {

            list-style: none;

            float: left;

            height: 50px;

            background-color: #005eac;

            display: block;

            line-height: 50px;

            text-align: center;

            color: white;

            border: solid 1px white;

            overflow: hidden;

            width:100%;

        }

    </style>

</head>

<body>

<ul> 

    <li name="2" style='display: none;'>我下移</li>

    <li name="2" style='display: none;'>我下移</li>

    <li name="2" style='display: none;'>我下移</li>

    <li name="2" style='display: none;'>我下移</li>

    <li name="2" style='display: none;'>我下移</li>

    <li name="1">我上移</li>

    <li name="1">我上移</li>

    <li name="1">我上移</li>

    <li name="1">我上移</li>

    <li name="1">我上移</li>

</ul>

</body>

</html>

<script type="text/javascript">

    $(document).ready(function() {

        $("ul > li[name='2']").slideDown();

        $("ul > li[name='1']").slideUp(500);

    });

</script>

  

你可能感兴趣的:(效果)