js实现百度搜索结果翻页效果

浏览数：25 / 时间：2015年06月09日

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库

js实现百度搜索结果翻页效果,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js实现百度搜索结果翻页效果