您的位置：首页 > Web前端 > JavaScript

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

2014-02-27 12:44 871 查看 
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
                                                分页
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航