直接贴代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JERRY-lala的幸福时刻</title> <style type="text/css"> body { background-image: url(http://bcs.duapp.com/jerryhutu/wed%2Fbg.jpg); background-repeat: no-repeat; background-position:top center; background-attachment:scroll; margin-top: 0px; margin-bottom: 0px; min-height:1684px; height:auto; _height:1684px; text-align:center; } a,a:hover {text-decoration:none;} .content-box {width:710px; margin:75px auto 95px; position:relative;display:inline-block;} .content {padding:0 18px 0 38px;background:#fff;height:85px;text-align:left;} .title{height:58px;margin-top:20px;} .title-con {} .fl {float:left; height:60px;} .fr{float:right} .cf:after {content:"";clear:both;display:block;height:0;overflow:hidden} .cf {zoom:1;} .zi666 {color:#666;} .zi333 {color:#333;} .zi999 {color:#999;} .item {margin-top: 20px;} .list {padding:11px 18px;height:55px;background:#F7F2FF;position:relative;font-size:14px;margin-bottom:10px;} .list-img {width:50px;height:50px;} .zi-name {color:#6600FF; font:bold;font-size:14px;} .zi-con {color:#333;font-size:12px;} .zi-name,.zi-con {padding-left:70px;} .date {position:absolute;top:12px;right:18px;color:#999;font-size:12px;} .lh24 {line-height:24px;} .fs12 {font-size:12px;} #ma {cursor:pointer;vertical-align:middle;} #ma-clone {display:none;width:258px;height:258px;position:absolute;top:400px;left:50%;margin-left:-129px;} /*-----------paginaton----------*/ /*-----------/paginaton----------*/ .pagination { text-align:center; font-family:arial; } .pagination .pg-list { vertical-align:top; display:inline-block; *display:inline; *zoom:1 } .pagination .pg-list a { display:inline-block; *display:inline; *zoom:1; height:22px; line-height:22px; padding:0 9px; margin-right:4px; border-style:solid; border-width:1px; border-color:#CCC; color:#666 } .pagination .pg-list a:hover { text-decoration:none; border-color:#6600FF } .pagination .pg-list a.prev,.pagination .pg-list a.next { padding:0 11px; background:#F4F4F4 } .pagination .pg-list a.disabled { color:#ABABAB; cursor:default } .pagination .pg-list a.disabled:hover { border-color:#6600FF } .pagination .pg-list span { display:inline-block; *display:inline; *zoom:1; height:22px; line-height:22px; padding:0 9px; margin-right:4px; border-style:solid; border-width:1px; border-color:#6600FF; background:#6600FF; color:#FFF } .pagination .pg-skip { vertical-align:top; display:inline-block; *display:inline; *zoom:1 } .pagination .pg-skip .num { width:40px; height:14px; padding:4px; border:1px solid #ccc; text-align:center } .pagination .pg-skip .btn { display:inline-block; *display:inline; *zoom:1; width:48px; border:0; height:24px; line-height:24px; background:#f60; color:#FFF; cursor:pointer; text-align:center } .pagination input { width:30px; height:21px; margin:0 8px; border:solid 1px #999; vertical-align:top; font-family:Arial,SimSun; text-align:center } .pagination i { vertical-align:middle; font-style:normal; display:inline-block; *display:inline; *zoom:1; height:24px; line-height:24px } .pagination button { border:0; background:#f60; color:#fff; width:51px; height:24px; vertical-align:top } .pagination form { display:inline-block; *display:inline; *zoom:1 } </style> <script src='http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js'></script> </head> <body> <div class="content-box"> <img src="http://bcs.duapp.com/jerryhutu/wed%2Fbanner.jpg"> <div class="content"> <div class="title cf"> <div class="fl title-con"> <img src='http://bcs.duapp.com/jerryhutu/wed%2Fshare.gif'> <div class="lh24 fs14 zi666"> 使用微博扫描右侧二维码，关注后发送内容即可留言</div> </div> <div class="fr"> <span class="fs12 zi666">点击放大>></span> <img src="http://bcs.duapp.com/jerryhutu/wed%2Fqrcode_258.jpg" width="58" height="58" id="ma"> </div> </div> <div class="item"> </div> <div class="pagination"> <p class="pg-list"> <a class="page disabled" href="">上一页</a> <span class="page-cur">1</span> <a href=""> 2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> ... <a href="">11</a> <a href="">12</a> <a href="" class="next">下一页</a> </p> </div> <!-- <div><img src="http://wxscreen-wxscreen.stor.sinaapp.com/20130803170547000000_1_40279_1031.png"></div>> --> </div> </div> <img src="http://bcs.duapp.com/jerryhutu/wed%2Fqrcode_258.jpg" width='258' height="258" id="ma-clone"> <script> $("#ma").click(function (e) { e.stopPropagation(); $("#ma-clone").show(); }); $(document).click(function () { $("#ma-clone").hide(); }); </script> </body> </html> <script type="text/javascript"> function paginator(obj, func, splitnum) { var page_count = obj.page_count; var page_no = obj.page_no; var page_size = obj.page_size; var num = splitnum * 2; var start = 1; var end = splitnum * 2; var prev = 1; var next = page_no + 1; if (page_no > page_count) page_no = page_count; if (page_no <= 0) page_no = 1; if (page_no > 1) { prev = page_no - 1; } if (next > page_count) { next = page_count; } if (page_count > 1) { if (end > page_count) end = page_count; if (page_no + splitnum <= page_count) { start = page_no - (splitnum - 1); end = page_no + splitnum; } else { start = page_count - (num - 1); end = page_count; } } if (start < 1) start = 1; end = end > page_count ? page_count : end; var html = '<a href="javascript:void(0);" class="prev" onclick="' + func.replace('{pageIndex}', prev + '') + ';">上一页</a>'; for (i = start; i <= end; i++) { if (i == page_no) { html += '<span class="c">' + i + '</span>'; } else html += '<a href="javascript:void(0)" onclick="' + func.replace('{pageIndex}', i + '') + ';">' + i + '</a>'; } if (page_no == page_count) { html += '<a href="javascript:void(0)" class="next">下一页</a>'; } else { html += '<a href="javascript:void(0)" class="next" onclick="' + func.replace('{pageIndex}', next + '') + ';">下一页</a>'; } return html; } //每页显示的数据行数 var pagesize = 3; var json = { "page_count": 0, "page_no": 1, "page_size": pagesize }; function GetPation(pageindex) { //ajax请求数据 var dataBind = ""; $.ajax({ url: 'UserMessages.aspx', type: 'GET', data: 'pageSize=' + pagesize + '&pageIndex=' + pageindex, dataType: 'json', timeout: 60000, error: function () { }, success: function (data) { $.each(data.result, function (key, val) { dataBind += '<div class="list"><img src="' + val.Uimg + '" class="fl list-img"><div class="zi-name">' + val.Uname + '</div><div class="zi-con">' + (val.MsgType == "1" ? val.Content : (val.MsgType == '3' ? '<img src="' + val.ImgUrl + '" style="40px; height:30px"/>' : '')) + '</div><div class="date">' + val.Ctime + '</div></div>'; }); $('.item').html(dataBind); json.page_count = data.pagination.page_count; json.page_no = data.pagination.page_no; //分页 if (json.page_count > 1) { $('.pg-list').html(paginator(json, "GetPation({pageIndex})", pagesize)); $('.pg-list').show(); } else { $('.pg-list').hide(); } } }); } //刷新页面 function F5_Page() { if (json.page_no==1) { $('.item').html("<div style='margin-left:230px;margin-bottom:30px; margin-top:200px'><img src='/img/loading.gif'/>正在刷新数据，请稍后...</div>"); setTimeout(function () { GetPation(1); }, 2000); } } GetPation(1); //五秒后执行刷新 setInterval("F5_Page()", 5000); </script>