jquery实现自动判断分页效果

2个月前 (03-06 14:28)阅读43回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

当手动翻页时,超过一定的页数,jquery根据选定页码自动判断跳转并在当前面页面显示适当页码,实用的jquery分页特效。

<!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="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>jquery实现自动判断分页效果_武鸣人</title>
<style type="text/css">
body{
font-size:12px;
color:#474747;
}
.wuming_ren{
border-style:solid;
border-width:1px;
border-color:Orange;
margin-left:10px;
margin-top:10px;
padding:4px;
text-align:center;
float:left;
cursor:hand;
background-color:White;
color:Black;
}
.www_wuming_ren{
background-color:#CCCCCC;
color:White;
}
</style>
<script type="text/javascript">
var totalPageCount = 54;        //分页导航总页数
var pageSize = 10;              //分页导航每页数
var currentPageIndex = 1;       //分页导航当前页索引
function overPage(event) {
$(event.target).addClass("www_wuming_ren");
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function outPage(event) {
$(event.target).removeClass("www_wuming_ren");
}
function selectPage(event) {
currentPageIndex = $(event.target).text();
createPage();
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function createPage() {
if (totalPageCount < 1 || pageSize < 1) {
return;
}
$("#wuming").html("");
var start = currentPageIndex - (Math.ceil(pageSize / 2) - 1);
//限制开始页数,每页数小于总页数时
if (pageSize < totalPageCount) {
if (start < 1) {
start = 1;
}
else if (start + pageSize > totalPageCount) {
start = totalPageCount - pageSize + 1;
}
}
else {
start = 1;
}
var end = start + pageSize - 1;
//限制结束页数,当结束页数大于总页数时
if (end > totalPageCount) {
end = totalPageCount;
}
var newNumberStr;
for (var i = start; i <= end; i++) {
newNumberStr = "";
if (i == currentPageIndex) {
newNumberStr = "<div class=\"wuming_ren www_wuming_ren\">" + i + "</div>";
}
else {
newNumberStr = "<div class=\"wuming_ren\">" + i + "</div>";
}
$("#wuming").append(newNumberStr);
}
//给所有项绑定事件
$(".wuming_ren").bind("click", selectPage).hover(overPage, outPage);
//当前页不绑定事件
$(".www_wuming_ren").unbind("click").unbind("mouseenter").unbind("mouseleave");
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
window.onload=createPage;
</script>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件,请刷新页面后看效果!
<div id="wuming"></div>
</body>
</html>


0
0
收藏0
回帖

jquery实现自动判断分页效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息