动画侧菜单在2个翻转部分
Animated side-menu in 2 rollover sections
我有以下代码,想知道是否有可能将菜单列表分成两个翻转部分,就像我们在这个例子中由下一个和上一个按钮激活一样。
我一直在努力弄清楚pagination
代码部分是如何工作的,但不幸的是,我不够好,以便适应并在我现有的代码片段上取得良好的结果。
我将非常感谢您的代码解决方案和想法。由于
<div class="pagination" id="pagination"><a href="javascript:void(0)" onclick="changePage(2,19, true)" class="next_page">Next page</a> <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>
试试这个
/* 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/
为了动态地执行,您需要首先编写一个算法。这里是一个粗略的想法:是否有可能将菜单列表拆分为两次翻转节,就像我们在这个例子中由next和previous激活的一样按钮
- 想想你想要的页面大小,
- 计算标记中的链接数,
- 根据页面大小和链接数到达所需的页面数,
- 使用计数器来跟踪当前页面,
- 通过隐藏当前页面前后的所有链接来显示当前页面,
- 显示/隐藏基于当前页面的导航按钮,最后
- 处理点击上一页/下一页按钮显示上一页/下一页。
现在试着在你的代码中一步一步地实现这个算法。这里是一个非常非常粗糙的例子(我没有复制样式,因为你已经有了):
对于前四个,您可以像这样使用变量(在代码注释中解释):
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>
<a href="#" id="nextPage" class="hidden">Next</a>
<span id="msg"></span>
</div>
小提琴链接: http://jsfiddle.net/abhitalks/7ntt2964/
您可以为"第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>
- 如何使用url加载程序在webpack中导入多个图像
- 多个单选按钮组相互干扰
- 下拉选择可自动更改第二个下拉选择
- 有没有办法让 i 从翻转区域触发多个弹出框
- 对同一页面上的多个项目使用剑道UI翻转效果/组合效果
- d3 中具有不同翻转操作的多个多边形
- 页面上有多个 JS 按钮,页面上具有翻转状态
- Jquery移动翻转开关从两个按钮中至少选择一个
- 交换两个翻转动画潜水
- 无法获得多个链接以将单个翻转更改为工作
- 函数减少esizeimage()对多个图像进行翻转
- 动画侧菜单在2个翻转部分
- JavaScript翻转的多个实例-停止运行
- 为什么我不能使用带有多个选择器的prop()来翻转check属性?
- 翻转多个图像javascript
- 翻转动画多个DIV's
- 卡翻转效果使用CSS3旋转,但有多个面取决于按钮按下
- Firebase Storage v3返回“多部分体”,不包含2个或3个部分.在Android 4.2.2和4.3上
- CSS图像翻转(一行4个图像)
- 引导滑块-防止翻转两个光标并停止滑动