您的位置：首页 > Web前端 > CSS
js+css分页效果

2016-04-02 21:13 841 查看
<!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>
<title>一款css+js打造的超酷简洁漂亮的分页效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
/*<![CDATA[*/
.vPagging * {
font-size: 12px;
font-family: "微软雅黑";
}

.vPagging {
clear: both;
text-align: left;
margin: 0 0 4px 0;
height: 50px;
}

.vPagging a {
text-align: center;
cursor: pointer;
display: block;
width: 15px;
float: left;
height: 15px;
padding: 5px;
color: #000071;
font-weight: 700;
margin: 0 2px 0 2px;
border: 1px #21385b solid;
background-color: #ecf5ff;
text-decoration: none;
font-family: "Arial";
}

.vPagging a.curp {
border: 1px #fff solid;
background-color: #fff;
}

.vPagging a:hover, .vPagging a:active {
background-color: #21385b;
color: #fff;
}

.vPagging p {
border-top: 1px solid #b2b2b2;
padding: 8px 0 4px 0;
}

/*]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA[
//xgz page controller beta 1.0
function g(v) {
return document.getElementById(v);
}
function setPage(n, v) {
var pageHTML = '';
//若果n不是数字,就返回.
if (isNaN(n))
return;

for (var p = 1; p <= n; p++)
//p=1,2,3,4,5,6
pageHTML += '<a id="v' + p + '" href="?Page=' + p + v + '">' + p + '</a>';
g("SetPage").innerHTML = pageHTML;
//            pageHTML = "";
}
var xfPageNum = 1;
function getPage() {
//取的url网址http://localhost:63342/PersonInter/person.html?page=1&Url=nihaoku.cn&Author=xgz
var xfUrl = document.location.href.toLowerCase();
//如果不存在page就返回
if (xfUrl.indexOf("page=") < 0)
return;
//从?处分割,取数组[1]段的字段
//http://localhost:63342/PersonInter/person.html,page=1&Url=nihaoku.cn&Author=xgz
var xfPara = xfUrl.split("?")[1];
//把取的字段用&分割page=1,Url=nihaoku.cn,Author=xgz
var xfParaArr = xfPara.split("&");
//遍历该字段page=1,Url=nihaoku.cn,Author=xgz
for (var x = 0; x < xfParaArr.length; x++)
//如果字段里有page
if (xfParaArr[x].indexOf('page') >= 0)
var xfPage = xfParaArr[x];
xfPageNum = xfPage.substring(xfPage.indexOf("page=") + 5);
if (g('v' + xfPageNum))
g('v' + xfPageNum).className = 'curp';
//            xfUrl = '';
//            xfPara = '';
//            xfParaArr = '';
g('CurpageLbl').innerHTML =  xfPageNum;
}
//]]>
</script>
<script language="javascript" type="text/javascript">
//<![CDATA[
var TotalPage = 15;//Asp.Net从后台注册一段JS块，Php、Asp、Jsp都可以直接绑定总页数到这个JS变量
var Parameter = "&Url=nihaoku.cn&Author=xgz";//如果还有其他变量，请在这里传递参数（变量，变量用“&”隔开，如：&UserId=xgz&VideoId=a7EfbDdC2A2as）
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="" class="vPagging">
<p>分页：（共<span id="CountPage">100</span>项记录，分<span id="CountPage1">10</span>页，当前为第<span id="CurpageLbl"></span>页）
<a id="UpPage" title="首页" onclick="location.href='?page=1'+Parameter;">«</a>
<a id="indexPage" title="上一页"
onclick="location.href='?page='+((parseInt(xfPageNum)-1>1)?parseInt(xfPageNum)-1:1)+Parameter;"><</a>
<span id="SetPage">页码初始化中……</span>
<a id="NextPage" title="下一页"
onclick="location.href='?page='+((parseInt(xfPageNum)+1<TotalPage)?parseInt(xfPageNum)+1:TotalPage)+Parameter;">></a>
<a id="EndPage" title="末页" onclick="location.href='?page='+TotalPage+Parameter;">»</a>
</p>
<script language="javascript" type="text/javascript">
//<![CDATA[
setPage(TotalPage, Parameter);
window.setTimeout(getPage, 100);
//]]>
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航