js实现百度搜索结果翻页效果:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>分页</title> <style> @charset "utf-8"; * {margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12px;font-family:arial, "Microsoft Yahei", "宋体";} .pages {text-align:center;width:100%;margin:20px auto;padding-top:20px;height:26px;overflow:hidden;} .pages a {padding:5px;border:1px solid #CCC;margin:0px 5px;text-decoration:none;color:#333;} .pages a:hover {border:1px solid #FC0;color:#F60;} .pages .this {border:1px solid #FC0;color:#F60;} </style> <script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script> <script type="text/javascript"> pageShow(1,11); //dbPage 当前页 //totalPages 总页数 function pageShow(dbPage,totalPages) { $(function() { //page分割数量 var pageFor = 11; var pageSlipt = parseInt(pageFor / 2); var pageHTML = new Array; if (dbPage > 1) //如果当前页大于1,则显示上一页 { var dbPagePre = dbPage-1; pageHTML += "<a href=\"javascript:pageShow(‘"+ (dbPagePre) +"‘,‘"+totalPages+"‘);\"><上一页</a>"; } if (totalPages > pageFor) //如果总页数大于分割页数 { if(dbPage <= pageSlipt+1) { for (i=1;i<=pageFor;i++) { if (i == dbPage) { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\" class=\"this\">" +i+ "</a>"; } else { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\">" +i+ "</a>"; } } } else if (dbPage > totalPages-pageSlipt) { for (i=totalPages-pageFor+1; i<=totalPages; i++) { if (i == dbPage) { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\" class=\"this\">" +i+ "</a>"; } else { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\">" +i+ "</a>"; } } } else { for (i=dbPage-pageSlipt; i<=parseInt(dbPage)+parseInt(pageSlipt); i++) { if (i == dbPage) { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\" class=\"this\">" +i+ "</a>"; } else { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\">" +i+ "</a>"; } } } } else { for (i=1; i<=totalPages; i++) { if (i == dbPage) { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\" class=\"this\">" +i+ "</a>"; } else { pageHTML += "<a href=\"javascript:pageShow(‘"+ i +"‘,‘"+totalPages+"‘ );\">" +i+ "</a>"; } } } if (parseInt(dbPage)<parseInt(totalPages)) //如果当前页小于总页数,则显示下一页 { var dbPageNext = parseInt(dbPage)+1; pageHTML += "<a href=\"javascript:pageShow(‘"+ dbPageNext +"‘,‘"+totalPages+"‘);\">下一页></a>"; } $(".pages").html(pageHTML); }); } </script> </head> <body> <div class="pages"></div> </body> </html>
需要依赖jQuery库