<html> <head> <title>jQuery模拟无刷新分页效果|河北苗木|河北金梆子锅炉</title> <script src="/images/jquery-1.4.2.min.js" type="text/javascript"></script> <style type="text/css"> body { font-size:12px; color:#474747; } .pagenumber { 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; } .pagenumberselected { 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("pagenumberselected"); } function outPage(event) { $(event.target) .removeClass("pagenumberselected") ; } function selectPage(event) { currentPageIndex = $(event.target).text(); createPage(); } function createPage() { if (totalPageCount < 1 || pageSize < 1) { return; } $("#page").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=\"pagenumber pagenumberselected\">" + i + "</div>"; } else { newNumberStr = "<div class=\"pagenumber\">" + i + "</div>"; } $("#page").append(newNumberStr); } //给所有项绑定事件 $(".pagenumber") .bind("click", selectPage) .hover(overPage, outPage) ; //当前页不绑定事件 $(".pagenumberselected") .unbind("click") .unbind("mouseenter") .unbind("mouseleave") ; } window.onload=createPage; </script> </head> <body> <div id="page"></div> </body> </html>
时间： 2024-10-08 13:41:05