直接贴代码：

<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">点击放大&gt;&gt;</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="width: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>

最新文章

  1. [Java Basics] Reflection
  2. silverlight 鼠标事件处理
  3. Python Import 详解
  4. WPF 资源
  5. [未完成]关于Java网络编程总结
  6. POJ1502: MPI Maelstrom
  7. Oracle存储过程procedure
  8. 蜘蛛牌（hdu 1584 DFS）
  9. 微软的一篇ctr预估的论文：Web-Scale Bayesian Click-Through Rate Prediction for Sponsored Search Advertising in Microsoft’s Bing Search Engine。
  10. leetcode — convert-sorted-list-to-binary-search-tree
  11. Slimming Plan
  12. layui模板和jfinal混合使用注意
  13. Spring（2）
  14. leecode第四题（寻找两个有序数组的中位数）
  15. MySQL学习笔记-数据库内存
  16. ThinkPHP5+Layui实现图片上传加预览
  17. Java线程总结---第一天
  18. XTU 1260 - Determinant - [2017湘潭邀请赛A题(江苏省赛)][高斯消元法][快速幂和逆元]
  19. ubuntu下安装.deb包的安装方法
  20. Docker——MacOS上安装运行docker

热门文章

  1. Castle ActiveRecord学习实践
  2. 哥也能写KMP了——实现strstr()
  3. Android改变了PDA市场格局
  4. 最长不下降子序列nlogn算法详解
  5. nginx 的安装
  6. C语言高效编程的几招（绝对实用，绝对经典）
  7. 日志分析(四) Elasticsearch的精确查询
  8. C#的空接合运算符 三目运算符
  9. SQL Server中内连接和外连接的区别
  10. Apache以及PHP的默认编码问题解决（详解）