2个翻转部分中的动画侧边菜单

Question

我有以下代码，并想知道是否有可能在两个翻转部分中拆分菜单列表，就像我们在此示例中由下一个和上一个按钮激活一样。

我一直在试图弄清楚pagination代码部分是如何工作的，但不幸的是，为了适应并在我现有的代码片段上取得好成绩，我还不够好。

我非常感谢您拥有代码解决方案和想法。 谢谢

<div class="pagination" id="pagination"><a href="javascript:void(0)" onclick="changePage(2,19, true)" class="next_page">Next page</a>&nbsp;<span>(1 of 2)</span></div>

 body { font: normal 1.0em Arial, sans-serif; background: #A8CBFF; } nav { font-size: 3.0em; line-height: 1.0em; color: white; width:6em; height: 9.0em; position:absolute; top:0; bottom:0; margin:auto; left: -4.5em; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { background-color: blue; height: 1.0em; padding: 0.25em; position: relative; border-top-right-radius: 0.75em; border-bottom-right-radius: 0.75em; -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms; transition: transform 500ms, background-color 500ms, color 500ms; } nav ul li:nth-child(1) { background-color: #00aced;} nav ul li:nth-child(2) { background-color: #3b5998;} nav ul li:nth-child(3) { background-color: #517fa4;} nav ul li:nth-child(4) { background-color: #007bb6;} nav ul li:nth-child(5) { background-color: #cb2027;} nav ul li:nth-child(6) { background-color: #ea4c89;} nav ul li:hover { background-color: #C1232D; -webkit-transform: translateX(4.5em); transform: translateX(4.5em); } nav ul li span { display:block; font-family: Arial; position: absolute; font-size:1em; line-height: 1.25em; height:1.0em; top:0; bottom:0; margin:auto; right: 0.16666666666667em; color: #F8F6FF; } a { color: #FFF; text-decoration: none; } 

 <nav> <ul> <li><a href="http://www.twitter.com">Category 1</a></li> <li><a href="http://www.facebook.com">Category 2</a></li> <li><a href="http://www.instagram.com">Category 3</a></li> <li><a href="http://www.instagram.com">Category 4</a></li> <li><a href="http://www.instagram.com">Category 5</a></li> <li><a href="http://www.instagram.com">Category 6</a></li> </ul> </nav> 

Answer 1

试试这个

 /* Bootstrap minified JavaScript included as External Resource */ $(document).ready(function(){ $('#page2').hide(); $('#paginate_pre').hide(); $('#paginate_next').on('click', function(){ $('#page1').hide(); $('#page2').show(); $('#paginate_next').hide(); $('#paginate_pre').show(); }); $('#paginate_pre').on('click', function(){ $('#page2').hide(); $('#page1').show(); $('#paginate_pre').hide(); $('#paginate_next').show(); }); }); 

 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <nav id="page1"> <ul> <li><a href="http://www.twitter.com">Category 1</a></li> <li><a href="http://www.facebook.com">Category 2</a></li> <li><a href="http://www.instagram.com">Category 3</a></li> <li><a href="http://www.instagram.com">Category 4</a></li> <li><a href="http://www.instagram.com">Category 5</a></li> <li><a href="http://www.instagram.com">Category 6</a></li> </ul> </nav> <nav id="page2"> <ul> <li><a href="http://www.twitter.com">Category 7</a></li> <li><a href="http://www.facebook.com">Category 8</a></li> <li><a href="http://www.instagram.com">Category 9</a></li> <li><a href="http://www.instagram.com">Category 10</a></li> <li><a href="http://www.instagram.com">Category 11</a></li> <li><a href="http://www.instagram.com">Category 12</a></li> </ul> </nav> <div ><a href="#" id="paginate_next">NEXT</a></div> <div ><a href="#" id="paginate_pre">PREV</a></div> 

小提琴： http ： //jsfiddle.net/anandgh/ozuzgdnt/

Answer 2

您可以在要添加到“第1页”的菜单选项中添加一个类，在“第2页”中添加与所需菜单选项不同的类，然后通过更改导航的类来相应地显示/隐藏。 像这样的东西：

 $("#next-page").on("click", function() { $("nav").removeClass("page1").addClass("page2"); }); $("#previous-page").on("click", function() { $("nav").removeClass("page2").addClass("page1"); }); 

 nav.page1 .page1-linkk { display:block; } nav.page1 .page2-link { display:none; } nav.page2 .page1-link { display:none; } nav.page2 .page2-link { display:block; } #next-page, #previous-page { text-align:right; } body { font: normal 1.0em Arial, sans-serif; background: #A8CBFF; } nav { font-size: 3.0em; line-height: 1.0em; color: white; width:6em; height: 9.0em; position:absolute; top:0; bottom:0; margin:auto; left: -4.5em; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { background-color: blue; height: 1.0em; padding: 0.25em; position: relative; border-top-right-radius: 0.75em; border-bottom-right-radius: 0.75em; -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms; transition: transform 500ms, background-color 500ms, color 500ms; } nav ul li:nth-child(1) { background-color: #00aced;} nav ul li:nth-child(2) { background-color: #3b5998;} nav ul li:nth-child(3) { background-color: #517fa4;} nav ul li:nth-child(4) { background-color: #007bb6;} nav ul li:nth-child(5) { background-color: #cb2027;} nav ul li:nth-child(6) { background-color: #ea4c89;} nav ul li:hover { background-color: #C1232D; -webkit-transform: translateX(4.5em); transform: translateX(4.5em); } nav ul li span { display:block; font-family: Arial; position: absolute; font-size:1em; line-height: 1.25em; height:1.0em; top:0; bottom:0; margin:auto; right: 0.16666666666667em; color: #F8F6FF; } a { color: #FFF; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav class="page1" id="mynav"> <ul> <li class="page1-link"><a href="http://www.twitter.com">Category 1</a></li> <li class="page1-link"><a href="http://www.facebook.com">Category 2</a></li> <li class="page1-link"><a href="http://www.instagram.com">Category 3</a></li> <li class="page1-link" id="next-page">NEXT</li> <li class="page2-link"><a href="http://www.instagram.com">Category 4</a></li> <li class="page2-link"><a href="http://www.instagram.com">Category 5</a></li> <li class="page2-link"><a href="http://www.instagram.com">Category 6</a></li> <li class="page2-link" id="previous-page">PREVIOUS</li> </ul> </nav> 

Answer 3

如果有可能将菜单列表拆分为两个翻转部分，就像我们在此示例中由下一个和上一个按钮激活一样

为了动态地执行此操作，您需要首先绘制算法。 这是一个粗略的想法：

1. 想想你想要的页面大小，
2. 计算加价中的链接数量，
3. 根据页面大小和链接数量到达所需的页数，
4. 使用计数器跟踪当前页面，
5. 通过隐藏当前页面之前和之后的所有链接来显示当前页面，
6. 显示/隐藏基于当前页面的导航按钮，最后
7. 处理上一个/下一个按钮以显示上一页/下一页。

现在尝试在您的代码中逐步实现此算法。 这是一个非常粗糙的例子（ 我没有重复你已经拥有的样式 ）：

对于前四个，您可以使用这样的变量（ 代码注释中的解释 ）：

var pageSize = 5,                           // configurable page size
    $links = $("#pagedMenu li"),            // select your links
    count = $links.length,                  // count of your links
    numPages = Math.ceil(count / pageSize), // number of pages required
    curPage = 1                             // start current page at 1
;

要显示当前页面，首先显示所有链接，然后隐藏当前页面之前和之后的所有链接。 您可以通过使用上面变量$links缓存的jQuery对象列表中的索引来完成此操作，如下所示（ 代码注释中的说明 ）：

function showPage(whichPage) { // function to show a particular page
    // previous links are the ones before where the current page starts
    // for example, if current page is 2, and each page has 5 links
    // then previous links are before index 5. 
    // (1st page indices are 0 thru 4.
    var previousLinks = (whichPage - 1) * pageSize, 

        // next links are after all previous links calculated above,
        // plus the page size. for example, if current page is 2, 
        // previous links are before index 5, add page size of 5,
        // so remaining links start at index 10.
        nextLinks = (previousLinks + pageSize);

    $links.show(); // show all links

    // slice the list from 0 thru previousLinks index calculated above
    // and hide them
    $links.slice(0, previousLinks).hide();

    // slice the list from nextLinks index calculated above and hide them
    $links.slice(nextLinks).hide();

    showPrevNext(); // call function to show/hide navigation buttons
}

要显示/隐藏下一个/上一个导航链接，现在您要做的就是检查（1）当前页面是否为第一页，然后仅显示下一个按钮，（2）如果当前页面是最后一页，则仅显示上一页按钮，（3）否则显示两个按钮。 您还可以轻松显示页码。 这是一个粗略的例子：

function showPrevNext() {
    if ((numPages > 0) && (curPage < numPages)) {
        $("#nextPage").removeClass('hidden'); 
        $("#msg").text("(" + curPage + " of " + numPages + ")");
    } else { 
        $("#nextPage").addClass('hidden'); 
    }
    if ((numPages > 0) && (curPage > 1)) {
        $("#prevPage").removeClass('hidden'); 
        $("#msg").text("(" + curPage + " of " + numPages + ")");
    } else { 
        $("#prevPage").addClass('hidden'); 
    }
}

最后，通过调用上面创建的showPage函数，将上一个/下一个导航按钮上的click事件连接起来，以显示基于当前页面的上一页或下一页。 它看起来像这样：

$("#nextPage").on("click", function() { showPage(++curPage); });
$("#prevPage").on("click", function() { showPage(--curPage); });

此外，在开始时触发showPage函数以从特定页面开始显示。

您可以在下面的代码段中看到原始工作示例。 尝试更改pageSize 。 另外，尝试添加/删除标记中的链接。

将所有内容组合在一起，示例代码段 ：

 var pageSize = 5, $links = $("#pagedMenu li"), count = $links.length, numPages = Math.ceil(count / pageSize), curPage = 1 ; showPage(curPage); function showPage(whichPage) { var previousLinks = (whichPage - 1) * pageSize, nextLinks = (previousLinks + pageSize); $links.show(); $links.slice(0, previousLinks).hide(); $links.slice(nextLinks).hide(); showPrevNext(); } function showPrevNext() { if ((numPages > 0) && (curPage < numPages)) { $("#nextPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#nextPage").addClass('hidden'); } if ((numPages > 0) && (curPage > 1)) { $("#prevPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#prevPage").addClass('hidden'); } } $("#nextPage").on("click", function() { showPage(++curPage); }); $("#prevPage").on("click", function() { showPage(--curPage); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="pagedMenu"> <ul> <li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li><li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li><li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li><li><a href="#">Link 10</a></li> <li><a href="#">Link 11</a></li><li><a href="#">Link 12</a></li> <li><a href="#">Link 13</a></li> </ul> </nav> <div id="pagination"> <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp; <a href="#" id="nextPage" class="hidden">Next</a> <span id="msg"></span> </div> 

小提琴链接 ： http ： //jsfiddle.net/abhitalks/7ntt2964/