仿豆瓣分页原型(Javascript版)
好久没发过帖子了~~。
因为工作需要,仿豆瓣式写了个分页的样式。
自我感觉,这样的分页前后兼顾,对于用户的体验是蛮好使的。
仿豆瓣分页原型(Javascript版)
/* Paginator */
.paginator {
font: 14.8px normal Arial, Helvetica, sans-serif;
color: #666666;
margin-top: 10px;
margin-bottom: 5px;
line-height: 150%;
background-color: #EEFFEE;
text-align: center;
}
.paginator a, .thispage, .break {
padding: 2px 4px;
}
.paginator .prev {
margin-right: 20px;
}
.paginator .next {
margin-left: 20px;
}
.paginator .count {
margin-left: 20px;
font-size: 11px;
}
function QueryString(item){
var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))
return sValue?sValue[1]:sValue
}
var count = 560;
var perpage = 20;
var currentpage = QueryString("page");
if (currentpage==null){
currentpage = 1;
}else{
currentpage = parseInt(currentpage);
}
var pagecount = Math.floor(count/perpage);
var pagestr = "";
var breakpage = 9;
var currentposition = 4;
var breakspace = 2;
var maxspace = 4;
var prevnum = currentpage-currentposition;
var nextnum = currentpage+currentposition;
if(prevnumpagecount) nextnum = pagecount;
pagestr += (currentpage==1)?'< 前页':'< 前页';
if(prevnum-breakspace>maxspace){
for(i=1;i'+i+'';
pagestr += '...';
for(i=pagecount-breakpage+1;i'+i+'';
}else{
for(i=1;i'+i+'';
}
for(i=prevnum;i'+i+'':''+i+'';
}
if(pagecount-breakspace-nextnum+1>maxspace){
for(i=nextnum+1;i'+i+'';
pagestr += '...';
for(i=pagecount-breakspace+1;i'+i+'';
}else{
for(i=nextnum+1;i'+i+'';
}
pagestr += (currentpage==pagecount)?'后页 >':'后页 >';
document.getElementById("pagebar").innerHTML = pagestr;
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]