jquery实现DIV翻页的效果

需求:

点击页面上div1的某个超链接,生成一个div2,div2以翻页的方式展现出来~~覆盖在原先div1的位置上!!!

这种要怎么实现????

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeList.aspx.cs" Inherits="EasyUi.KnowledgeList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
     
     
    <script>
        $(function () {
            var ds = $('.list div'), L = ds.length, ii = 1;
            $('.a').click(function () {
                var el = $(this).parent('div');
                var n = $(ds[(el.index() +1) % L]);
                n.css({ left: 100, zIndex: ii++ }).animate({ left: 0 }, 400)

            });
            $('.b').click(function () {
                var el = $(this).parent('div');
                var n = $(ds[(el.index() - 1) % L]);
                n.css({ left: 100, zIndex: ii++ }).animate({ left: 0 }, 400)

            });

        })
         
    </script>
    <style>
        .list{
            margin:100px;
            width:500px;
            height:210px;
            position:relative;
            overflow:hidden;
            border:1px solid #ccc;
        }
        .list div{
             border:1px solid #ccc;
             width:200px;
             height:200px;
            background:#fff;
            position: absolute;
        }
  
         
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="list">
        <div class="act" ><a class="b" href="javascript:;" >pre</a>1111 <a class="a" href="javascript:;" >next</a>  </div>
         <div><a class="b" href="javascript:;" >pre</a>2222  <a class="a" href="javascript:;" >next</a> </div>
         <div><a class="b" href="javascript:;" >pre</a>333  <a class="a" href="javascript:;" >next</a> </div>
    </div>
    </form>
</body>
</html>

关键性代码就是: n.css({ left: 100, zIndex: ii++ }).animate({ left: 0 }, 400)

意思就是从离左边框100px的地方,滑动到左边边框处,时间为400毫秒

原文地址:https://www.cnblogs.com/wenghaowen/p/3338884.html