仿豆瓣分页原型(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需刷新才能执行]

赞 (0)

相关推荐

  • javascript实现炫酷的拖动分页

    javascript实现炫酷的拖动分页 js <html> <head> <title>拖动分页</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> body{ border:0px; margin:0px; overflow:hidden; background-color:transparent;

  • 原生javascript实现的分页插件pagenav

    原生javascript实现的分页插件pagenav

    这一款是用原生javascript实现的分页插件pagenav,页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码,调用时可根据需要先重写go方法.(已去除jquery依赖).... 插件代码如下: /* ************************** author:Keel (keel.sike@gmail.com) ************************** 页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码. 调用时可根据需要先重

  • javascript 新闻标题静态分页代码 (无刷新)

    javascript 新闻标题静态分页代码 (无刷新)

       一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t

  • javascript分页代码(当前页码居中)

    复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag

  • JavaScript实现列表分页功能特效

    最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚.最终实现的效果是:上一页.第一页.-(上n个页码).n个页码.-(下n个页码).最后一页.下一页.n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5.写的时候,主要注意了以下几个地方: 页码等于1时,只显示上一页.第一页.最后一页,且都没有跳转: 页码小于等于2时,不需要中间的n个页码: 页码小于等于n时,显示所有页码,不显示2个"-": 2个"-"换页时,换n个页

  • 超酷的鼠标拖拽翻页(分页)效果实现javascript代码

    拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{

  • Javascript静态分页(多个资料，静态自动分页)

    静态分页(首尾页)www.jb51.net ul {display:none} 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 var obj,j; var page=0; var nowPage=0;//当前页 var listNum=3;//每页显示 数 var PagesLen;//总页数 var PageNum=4;//分页链接接数(5个) onload=function(){ obj=document.getEle

  • 仿豆瓣分页原型(Javascript版)

    好久没发过帖子了~~. 因为工作需要,仿豆瓣式写了个分页的样式. 自我感觉,这样的分页前后兼顾,对于用户的体验是蛮好使的. 仿豆瓣分页原型(Javascript版) /* Paginator */ .paginator { font: 14.8px normal Arial, Helvetica, sans-serif; color: #666666; margin-top: 10px; margin-bottom: 5px; line-height: 150%; background-colo

  • JavaScript仿静态分页实现方法

    JavaScript仿静态分页实现方法

    本文实例讲述了JavaScript仿静态分页实现方法.分享给大家供大家参考.具体如下: 这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE> 静态分页</TITLE> <style> * {

  • jQuery实现的仿百度分页足迹效果代码

    jQuery实现的仿百度分页足迹效果代码

    本文实例讲述了jQuery实现的仿百度分页足迹效果代码.分享给大家供大家参考,具体如下: 这是一个类似于百度的分页足迹效果,基于jquery,原理就是所有为奇数的足迹元素给不一样的样式而已,其它的非奇数元素就按默认的样式. 参数说明: obj为所有奇数元素 even当前所要点击触发事件 bg为足迹元素 active_bg为点击后的足迹背景 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-baidu-page-style-code

  • JavaScript版的TwoQueues缓存模型

    本文所指TwoQueues缓存模型,是说数据在内存中的缓存模型. 无论何种语言,都可能需要把一部分数据放在内存中,避免重复运算.读取.最常见的场景就是JQuery选择器,有些Dom元素的选取是非常耗时的,我们希望能把这些数据缓存起来,不必每次调用都去重新遍历Dom树. 存就存吧,但总得有个量吧!总不能把所有的历史数据都放在内存中,毕竟目前内存的容量还是相当可怜的,就算内存够大,理论上每个线程分配的内存也是有限制的. 那么问题来了,如何才能高效的把真正有用的数据缓存起来呢?这就涉及到淘汰算法,需要

  • 纯javascript版日历控件

    纯javascript版日历控件

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

  • PHP实现仿Google分页效果的分页函数

    本文实例讲述了PHP实现仿Google分页效果的分页函数.分享给大家供大家参考.具体如下: /** * 分页函数 * @param int $total 总页数 * @param int $pagesize 每页几条 * @param string $pkey url中页面变量名称 * @param string $url 基础url,其中的{page}会被替换为页码 * 依赖函数 request_uri httpInt */ function page($total,$pagesize=10,

  • 琥珀无限级联动菜单-JavaScript版

    琥珀网 - javascript无限级联动菜单 body, td { font-family: 宋体; font-size: 12px; } /*---------------------------------------------------------------------------*\ | Subject: JavaScript三级联动菜单 | | Version: 1.0 | | Author: 琥珀[hopesoft] | | FileName: HPMenu.js | | C

  • JavaScript版代码高亮

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript版代码高亮</title><link href=&

  • JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

    JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】

    本文实例讲述了JavaScript扫雷游戏.分享给大家供大家参考,具体如下: 翻出年初写的游戏贴上来,扫雷相信大家都玩过,先上图: 源码: <!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.or

  • JavaScript版TAB选项卡效果实例

    复制代码 代码如下: <!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><meta http-equiv="

随机推荐