zoukankan      html  css  js  c++  java

  • Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

    1. index.php代码  

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.     <head>  
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.         <title>滚屏加载--无刷新动态加载数据技术的应用-www.corange.cn</title>  
    6.         <style type="text/css">  
    7.             #container{margin:10px auto; 660px; border: 1px solid #999;}   
    8.             .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}  
    9.             .author{position: absolute; left: 0px; font-weight:bold; color:#39f}  
    10.             .date{position: absolute; right: 0px; color:#999}  
    11.             .content{line-height:20px; word-break: break-all;}  
    12.             .element_head{ 100%; position: relative; height: 20px;}  
    13.             .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px}  
    14.         </style>  
    15.         <script type="text/javascript" src="../jquery.js"></script>  
    16.         <script type="text/javascript">  
    17.             $(function() {  
    18.                 var winH = $(window).height(); //页面可视区域高度  
    19.                 var i = 1;  
    20.                 $(window).scroll(function() {  
    21.                     var pageH = $(document.body).height();  
    22.                     var scrollT = $(window).scrollTop(); //滚动条top  
    23.                     var aa = (pageH - winH - scrollT) / winH;  
    24.                     if (aa < 0.02) {  
    25.                         $.getJSON("result.php", {page: i}, function(json) {  
    26.                             if (json) {  
    27.                                 var str = "";  
    28.                                 $.each(json, function(index, array) {  
    29.                                     var str = "<div class="single_item"><div class="element_head">";  
    30.                                     var str = str + "<div class="date">" + array['date'] + "</div>";  
    31.                                     var str = str + "<div class="author">" + array['author'] + "</div>";  
    32.                                     var str = str + "</div><div class="content">" + array['content'] + "</div></div>";  
    33.                                     $("#container").append(str);  
    34.                                 });  
    35.                                 i++;  
    36.                             } else {  
    37.                                 $(".nodata").show().html("别滚动了，已经到底了。。。");  
    38.                                 return false;  
    39.                             }  
    40.                         });  
    41.                     }  
    42.                 });  
    43.             });  
    44.         </script>  
    45.     </head>  
    46.     <?php   
    47.     require_once('connect.php');   
    48.     $user = array('demo1','demo2','demo3','demo3','demo4');   
    49.     ?>   
    50.     <div id="container">   
    51.         <?php   
    52.         $query=mysql_query("select * from comments order by id desc limit 0,15");   
    53.         while ($row=mysql_fetch_array($query)) {   
    54.         ?>   
    55.         <div class="single_item">   
    56.             <div class="element_head">   
    57.                 <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>   
    58.                 <div class="author"><?php echo $user[$row['userid']];?></div>   
    59.             </div>   
    60.             <div class="content"><?php echo $row['content'];?></div>   
    61.         </div>   
    62.         <?php } ?>   
    63.     </div>   
    64.     <div class="nodata"></div>   

    result.PHP代码

     
    1. <?php  
    2. require_once('connect.php'); //连接数据库   
    3.    
    4. $user = array('demo1','demo2','demo3','demo3','demo4');   
    5. $page = intval($_GET['page']);  //获取请求的页数   
    6. $start = $page*15;   
    7. $query=mysql_query("select * from comments order by id desc limit $start,15");   
    8. while ($row=mysql_fetch_array($query)) {   
    9.     $arr[] = array(   
    10.         'content'=>$row['content'],   
    11.         'author'=>$user[$row['userid']],   
    12.         'date'=>date('m-d H:i',$row['addtime'])   
    13.     );   
    14. }   
    15. echo json_encode($arr);  //转换为json数据输出   
    16. ?>  

    connect.php代码

     
    1. <?php  
    2. $host="localhost";  
    3. $db_user="root";  
    4. $db_pass="";  
    5. $db_name="demo";  
    6. $timezone="Asia/Shanghai";  
    7.   
    8. $link=mysql_connect($host,$db_user,$db_pass);  
    9. mysql_select_db($db_name,$link);  
    10. mysql_query("SET names UTF8");  
    11. ?>  
  • 相关阅读:
    杭电2050
    杭电2043，小细节。。。。。
    杭电2034，坑爹的人见人爱a-b
    杭电2035--人见人爱A^B
    杭电2032--杨辉三角
    杭电2029--Palindromes _easy version（回文串）
    杭电2028--Lowest Common Multiple Plus
    NPOI大数据分批写入同个Excel
    [每日一题] OCP1z0-047 :2013-07-25 权限――角色与对象权限
    Ubuntu下安装搜狗拼音输入法
  • 原文地址：https://www.cnblogs.com/zxz1987/p/6417193.html
Copyright © 2011-2022 走看看