CSS3 3D立体分页插件

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

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

以下是 CSS3 3D立体分页插件的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3 3D立体分页插件</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
    <div id="pagination"></div>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

/* * * * * * * * * * * * * * * * * * Pagination * javascript page navigation * * * * * * * * * * * * * * * * */
var Pagination ={
	code:'',// -------------------- // Utility // -------------------- // converting initialize data Extend:function(data){
	data = data ||{
}
;
	Pagination.size = data.size || 300;
	Pagination.page = data.page || 1;
	Pagination.step = data.step || 3;
}
,// add pages by number (from [s] to [f]) Add:function(s,f){
	for (var i = s;
	i < f;
	i++){
	Pagination.code += '<a>' + i + '</a>';
}
}
,// add last page with separator Last:function(){
	Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
}
,// add first page with separator First:function(){
	Pagination.code += '<a>1</a><i>...</i>';
}
,// -------------------- // Handlers // -------------------- // change page Click:function(){
	Pagination.page = +this.innerHTML;
	Pagination.Start();
}
,// previous page Prev:function(){
	Pagination.page--;
	if (Pagination.page < 1){
	Pagination.page = 1;
}
Pagination.Start();
}
,// next page Next:function(){
	Pagination.page++;
	if (Pagination.page > Pagination.size){
	Pagination.page = Pagination.size;
}
Pagination.Start();
}
,// -------------------- // Script // -------------------- // binding pages Bind:function(){
	var a = Pagination.e.getElementsByTagName('a');
	for (var i = 0;
	i < a.length;
	i++){
	if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
	a[i].addEventListener('click',Pagination.Click,false);
}
}
,// write pagination Finish:function(){
	Pagination.e.innerHTML = Pagination.code;
	Pagination.code = '';
	Pagination.Bind();
}
,// find pagination type Start:function(){
	if (Pagination.size < Pagination.step * 2 + 6){
	Pagination.Add(1,Pagination.size + 1);
}
else if (Pagination.page < Pagination.step * 2 + 1){
	Pagination.Add(1,Pagination.step * 2 + 4);
	Pagination.Last();
}
else if (Pagination.page > Pagination.size - Pagination.step * 2){
	Pagination.First();
	Pagination.Add(Pagination.size - Pagination.step * 2 - 2,Pagination.size + 1);
}
else{
	Pagination.First();
	Pagination.Add(Pagination.page - Pagination.step,Pagination.page + Pagination.step + 1);
	Pagination.Last();
}
Pagination.Finish();
}
,// -------------------- // Initialization // -------------------- // binding buttons Buttons:function(e){
	var nav = e.getElementsByTagName('a');
	nav[0].addEventListener('click',Pagination.Prev,false);
	nav[1].addEventListener('click',Pagination.Next,false);
}
,// create skeleton Create:function(e){
	var html = [ '<a>&#9668;
	</a>',// previous button '<span></span>',// pagination container '<a>&#9658;
	</a>' // next button ];
	e.innerHTML = html.join('');
	Pagination.e = e.getElementsByTagName('span')[0];
	Pagination.Buttons(e);
}
,// init Init:function(e,data){
	Pagination.Extend(data);
	Pagination.Create(e);
	Pagination.Start();
}
}
;
	/* * * * * * * * * * * * * * * * ** Initialization* * * * * * * * * * * * * * * * */
var init = function(){
	Pagination.Init(document.getElementById('pagination'),{
	size:30,// pages size page:1,// selected page step:3 // pages before and after current}
);
}
;
	document.addEventListener('DOMContentLoaded',init,false);

CSS代码(style.css):

html{height:60%;width:100%;background-color:#D7D7D7;background-image:-webkit-radial-gradient(contain,#F2F2F2,#D1D1D1);background-image:-moz-radial-gradient(contain,#F2F2F2,#D1D1D1);background-image:-ms-radial-gradient(contain,#F2F2F2,#D1D1D1);background-image:-o-radial-gradient(contain,#F2F2F2,#D1D1D1);background-image:radial-gradient(contain,#F2F2F2,#D1D1D1);}
body{margin:0;height:100%;width:100%;text-align:center;font-family:Arial,sans-serif;background-image:url(data:image/png;base64,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);}
body:before{content:'';display:inline-block;width:0;height:100%;vertical-align:middle;}
#pagination{display:inline-block;vertical-align:middle;border-radius:4px;padding:1px 2px 4px 2px;border-top:1px solid #AEAEAE;border-bottom:1px solid #FFFFFF;background-color:#DADADA;background-image:-webkit-linear-gradient(top,#DBDBDB,#E2E2E2);background-image:-moz-linear-gradient(top,#DBDBDB,#E2E2E2);background-image:-ms-linear-gradient(top,#DBDBDB,#E2E2E2);background-image:-o-linear-gradient(top,#DBDBDB,#E2E2E2);background-image:linear-gradient(top,#DBDBDB,#E2E2E2);}
#pagination a,#pagination i{display:inline-block;vertical-align:middle;width:22px;color:#7D7D7D;text-align:center;font-size:10px;padding:3px 0 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
#pagination a{margin:0 2px 0 2px;border-radius:4px;border:1px solid #E3E3E3;cursor:pointer;box-shadow:inset 0 1px 0 0 #FFF,0 1px 2px #666;text-shadow:0 1px 1px #FFF;background-color:#E6E6E6;background-image:-webkit-linear-gradient(top,#F3F3F3,#D7D7D7);background-image:-moz-linear-gradient(top,#F3F3F3,#D7D7D7);background-image:-ms-linear-gradient(top,#F3F3F3,#D7D7D7);background-image:-o-linear-gradient(top,#F3F3F3,#D7D7D7);background-image:linear-gradient(top,#F3F3F3,#D7D7D7);}
#pagination i{margin:0 3px 0 3px;}
#pagination a.current{border:1px solid #E9E9E9;box-shadow:0 1px 1px #999;background-color:#DFDFDF;background-image:-webkit-linear-gradient(top,#D0D0D0,#EBEBEB);background-image:-moz-linear-gradient(top,#D0D0D0,#EBEBEB);background-image:-ms-linear-gradient(top,#D0D0D0,#EBEBEB);background-image:-o-linear-gradient(top,#D0D0D0,#EBEBEB);background-image:linear-gradient(top,#D0D0D0,#EBEBEB);}

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