jquery实现DIV翻页的效果

最新推荐文章于 2021-06-20 07:54:55 发布

weixin_30532987

最新推荐文章于 2021-06-20 07:54:55 发布

阅读量240

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wenghaowen/p/3338884.html

版权

需求：

点击页面上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

weixin_30532987

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现DIV翻页的效果

需求：点击页面上div1的某个超链接，生成一个div2，div2以翻页的方式展现出来~~覆盖在原先div1的位置上！！！这种要怎么实现？？？？<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KnowledgeList.aspx.cs" Inherits="EasyUi.KnowledgeList" %...
复制链接

扫一扫