这个效果是在一个网站上看到的，大开网页先显示一部分，可以说是按需加载。就是滑动条到达底部再加载，但是也不是无限的，应该有一个大的限度。下面又页码数字，点击又是一部分，一部分的加载。我觉得这个效果非常不错，思考怎么实现。目前没有完全实现，但是大致效果有了，只要实现从数据库读取数据就算可以大功告成了。有时间再来实现吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var index;
$(document).ready(function(){
test();//触发
function test(){
$("#setpage span").each(function(i,n){
$(this).click(function () {
temp=$("#spadd").remove();
var newtemp=$(‘<span id="spadd" class="spadd">点击加载</span>‘);
$("#content").html("");
newtemp.appendTo($("#content"));
var num=$(this).text();
//这里是每页是50条
// alert(num);
index=(parseInt(num, 10)-1)*50 +5;
$("#hxt").val(index);
$("#big").val(num);
$(this).addClass("current").siblings().removeClass("current");
});
});
}
$(‘#content‘).on(‘click‘,‘span‘,function () {
//alert("dd");
//每页是5条
index = $("#hxt").val();
div=$("<div class=‘.yema‘>第"+index+"页<hr/></div>")
$("#content").append(div);
var bignum= $("#big").val();
var num= (parseInt(bignum, 10))*5*10;
if(index>=num){
//$(‘#content‘).off(‘click‘,‘span‘);//怎么移除off
$("#spadd").remove();
return;
}else
{
$("#spadd").appendTo($("#content"));
}
var x = parseInt(index, 10) + 5;
$("#hxt").val(x);
});
});
</script>
<style type="text/css">
#content{width:100%;height:auto;}
.yema{width:80%; height:100px;}
#setpage {
margin: 15px auto;
text-align: center;
}
#setpage span{
border:1px solid #DDD;
background:#0d6cbf;
display:inline-block;
margin:1px;
text-decoration:none;
text-align:center;
color:#fff;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
}
#setpage .current{
border:1px solid #0d6cbf;
background: #fff;
margin:1px;
color: #000;
text-decoration: underline;
}
</style>
</head>
<body>
总页数：<input type="text" id="txttotal" /><br />
当前页：<input type="text" id="txtcurr" />
<div id="content">
<span id="spadd" class="spadd">点击加载</span>
</div>
<input type="hidden" id="hxt" value="5" />
<input type="hidden" id="big" value="1" />
<div id="setpage">
<span class="current">1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
</body>
</html>
效果图：
时间： 2024-07-29 01:57:05