jquery.jqpagination.js分页插件 js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery.jqpagination.js分页插件 js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>  
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>jquery.jqpagination.js分页插件</title>
<!-- 可无视 -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/demo.css" />
<!-- 必要样式 -->
<link rel="stylesheet" href="css/jqpagination.css" />
<!-- scripts -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.jqpagination.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="wrapper">
	<div class="gigantic pagination">
		<a href="#" class="first" data-action="first">&laquo;</a>
		<a href="#" class="previous" data-action="previous">&lsaquo;</a>
		<input type="text" readonly="readonly" />
		<a href="#" class="next" data-action="next">&rsaquo;</a>
		<a href="#" class="last" data-action="last">&raquo;</a>
	</div>
</div>
</body>
</html>

JS代码(scripts.js):

$(document).ready(function(){
	$('.pagination').jqPagination({
	link_string:'/?page={
	page_number}
',max_page:40,paged:function(page){
	$('.log').prepend('<li>Requested page ' + page + '</li>');
}
}
);
}
);

CSS代码(demo.css):

body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;font-weight:300;color:rgba(0,0,0,0.8);}
/* The Magnificent Clearfix:Updated to prevent margin-collapsing on child elements in most situations. nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
/* headings */
h1,h2,h3,h4,h5,h6{margin:30px 0 15px 0;}
h1{font-size:55px;}
h2{border-bottom:1px solid #DFDFDF;font-size:30px;}
h3{font-size:20px;}
h4{font-size:20px;}
p{margin:20px 0;line-height:30px;}
small{font-size:70%;}
ul{list-style:disc;margin:20px 0 20px 25px;}
ul li{margin:5px 0;}
strong{font-weight:700;}
code{background-color:#EEEEEE;padding:4px;margin:-4px 0;}
.wrapper{padding:20px;width:900px;margin:0 auto;}

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)