仿豆瓣分页原型(Javascript版)

好久没发过帖子了~~。
因为工作需要，仿豆瓣式写了个分页的样式。
自我感觉，这样的分页前后兼顾，对于用户的体验是蛮好使的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" > <head>     <meta http-equiv="content-type" content="text/html; charset=gb2312" />     <meta name="author" content="Smiling Dolphin" />     <meta name="keywords" content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display, java, javascript, c++, php, jsp, asp, py, pl" />     <meta name="description" content="my favorites language." />     <meta name="robots" content="all" />     <title>仿豆瓣分页原型（Javascript版）</title>     <style type="text/css" title="currentStyle" media="screen">         /* 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;         }     </style> </head> <body> <div id="pagebar" class="paginator"></div> <script language="javascript" type="text/javascript"> 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(prevnum<1) prevnum = 1; if(nextnum>pagecount) nextnum = pagecount; pagestr += (currentpage==1)?'<span class="prev">&lt; &#21069;&#39029;</span>':'<span class="prev">&lt; <a href="?page='+(currentpage-1)+'">&#21069;&#39029;</a></span>'; if(prevnum-breakspace>maxspace){     for(i=1;i<=breakspace;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>';     pagestr += '<span class="break">...</span>';     for(i=pagecount-breakpage+1;i<prevnum;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; }else{     for(i=1;i<prevnum;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; } for(i=prevnum;i<=nextnum;i++){     pagestr += (currentpage==i)?'<span class="thispage">'+i+'</span>':'<a href="?page='+i+'">'+i+'</a>'; } if(pagecount-breakspace-nextnum+1>maxspace){     for(i=nextnum+1;i<=breakpage;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>';     pagestr += '<span class="break">...</span>';     for(i=pagecount-breakspace+1;i<=pagecount;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; }else{     for(i=nextnum+1;i<=pagecount;i++)         pagestr += '<a href="?page='+i+'">'+i+'</a>'; } pagestr += (currentpage==pagecount)?'<span class="next">&#21518;&#39029; &gt;</span>':'<span class="next"><a href="?page='+(currentpage+1)+'">&#21518;&#39029;</a> &gt;</span>'; document.getElementById("pagebar").innerHTML = pagestr; </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

仿豆瓣分页原型(Javascript版)

您可能感兴趣的文章: