需求:
点击页面上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毫秒