标签：
这个效果是在一个网站上看到的，大开网页先显示一部分，可以说是按需加载。就是滑动条到达底部再加载，但是也不是无限的，应该有一个大的限度。下面又页码数字，点击又是一部分，一部分的加载。我觉得这个效果非常不错，思考怎么实现。目前没有完全实现，但是大致效果有了，只要实现从数据库读取数据就算可以大功告成了。有时间再来实现吧。
<!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>
效果图：
标签：
原文地址：http://www.cnblogs.com/xiaohuasan/p/5509636.html
