<!--
function showPageLink(sUrl,iPage,iCount){
var i
i=Math.max(1,iPage-1)
if(iPage==1){
document.write("<span style='color:#7D7D7D'><FONT face=Webdings>9</FONT></span>")
document.write("<span style='color:#7D7D7D'><FONT face=Webdings>7</FONT></span>")
}
else{
document.write("<a href=\"" + sUrl + "1\" title='第 1 页'><FONT face=Webdings>9</FONT></a>")
document.write("<a href=\"" + sUrl + i + "\" title='上一页(第 " + i + " 页)'><FONT face=Webdings>7</FONT></a>")
}
if(iPage>6) document.write("<span style='font-size:8px'>···</span>")
for(i=Math.max(1,iPage-5)i<iPagei++){
document.write("<a href=\""+sUrl + i + "\" title='第 " + i + " 页'><b>" + i + "</b></a>")
}
document.write("<font color='#ff3333'><b>" + iPage + "</b></font>")
for(i=iPage+1i<=Math.min(iCount,iPage+5)i++){
document.write("<a href=\""+sUrl + i + "\" title='第 " + i + " 页'><b>" + i + "</b></a>")
}
i=Math.min(iCount,iPage+1)
if(iCount>iPage+5) document.write("<span style='font-size:8px'>···</span>")
if(iPage==iCount){
document.write("<span style='color:#7D7D7D'><FONT face=Webdings>8</FONT></span>")
document.write("<span style='color:#7D7D7D'><FONT face=Webdings>:</FONT></span>")
}
else{
document.write("<a href=\"" + sUrl + i + "\" title='下一页(第 " + i + " 页)'><FONT face=Webdings>8</FONT></a>")
document.write("<a href=\"" + sUrl + iCount + "\" title='最后一页(第 " + iCount + " 页)'><FONT face=Webdings>:</FONT></a>")
}
}
showPageLink("<%=selfname%>?page=",<%=page%>,<%=totalpage%>)
//-->
</script>
其中selfname为该页面的文件路径
page为当前页
totalpage为总页数
分屏加载吧 滑到哪加载哪从网页头引入两个js文件,注意必须先放jquery的
[javascript] view plaincopy
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在网页头自己写一个js脚本
[javascript] view plaincopy
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方)
animate: true, //加载时候时候需要动画,默认是false
maxPage: 3,//最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿
})
})
</script>
3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助
[html] view plaincopy
<%@ page language="java" contentType="text/htmlcharset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无限翻页效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句,除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
})
})
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"><!-- 每次要加载数据的数据块-->
第一页内容第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容
</div>
</div>
<div id="navigation" align="center"><!-- 页面导航-->
<a href="user/list?page=1"></a> <!-- 此处可以是url,可以是action,要注意不是每种html都可以加,是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数,这个一定要加在这里,它的作用是指出当前页面页码,没加载一次数据,page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->
</div>
</body>
</html>