翻页效果 

<!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>

　　

posted @ 2013-02-20 18:18  Ganler1988  阅读(145)  评论(0)    收藏  举报