首页>>Jquery文字>>滚动加载更多内容(2013-10-29)

滚动加载更多内容

本例与《无刷新动态加载数据，滚动条加载》功能是相同的，自己查看用哪个更好.

数据库很简单content表 字段id和message

滚动加载更多内容
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <?php  
  2. include_once('../../conn.php');  
  3.   
  4.   
  5. $last_msg_id=$_GET['last_msg_id'];  
  6. $action=$_GET['action'];  
  7.   
  8. if($action <> "get")  
  9. {  
  10. ?>  
  11.   
  12. <link rel="stylesheet" href="css.css" type="text/css" />  
  13. <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>  
  14.       
  15.     <script type="text/javascript">  
  16.     $(document).ready(function(){  
  17.               
  18.         function last_msg_funtion()   
  19.         {   
  20.              
  21.            var ID=$(".message_box:last").attr("id");  
  22.             $('div#last_msg_loader').html('<img src="bigLoader.gif">');  
  23.             $.post("index.php?action=get&last_msg_id="+ID,  
  24.               
  25.             function(data){  
  26.                 if (data != "") {  
  27.                 $(".message_box:last").after(data);           
  28.                 }  
  29.                 $('div#last_msg_loader').empty();  
  30.             });  
  31.         };    
  32.           
  33.         $(window).scroll(function(){  
  34.             if  ($(window).scrollTop() == $(document).height() - $(window).height()){  
  35.                last_msg_funtion();  
  36.             }  
  37.         });   
  38.           
  39.     });  
  40.       
  41.       
  42.     </script>  
  43. <link rel="stylesheet" type="text/css" href="../demo.css">  
  44. </head>  
  45. <body>  
  46.   
  47. <div align="center">  
  48. <?php  
  49.   
  50. include('load_first.php');  
  51.   
  52. ?>  
  53. <div id="last_msg_loader"></div>  
  54. </div>  
  55.   
  56. </div>  
  57. </body>  
  58. </html>  
  59.   
  60.   
  61. <?php  
  62. }  
  63. else  
  64. {  
  65.    
  66. include('load_second.php');       
  67.       
  68.         }  
  69. ?>    
  70.           

 load_first.php

PHP Code
  1. <?php  
  2. $sql=mysql_query("SELECT * FROM content ORDER BY id DESC LIMIT 15");  
  3. while($row=mysql_fetch_array($sql))  
  4.         {  
  5.         $msgID= $row['id'];  
  6.         $msg= $row['message'];  
  7.   
  8. ?>  
  9. <div id="<?php echo $msgID; ?>"  align="left" class="message_box" >  
  10. <span class="number"><?php echo $msgID; ?></span><?php echo $msg; ?>   
  11. </div>  
  12.   
  13. <?php  
  14. }  
  15. ?>  

load_second.php

PHP Code
  1. <?php  
  2. $last_msg_id=$_GET['last_msg_id'];  
  3.  $sql=mysql_query("SELECT * FROM content WHERE id < '$last_msg_id' ORDER BY id DESC LIMIT 5");  
  4.  $last_msg_id="";  
  5.   
  6.         while($row=mysql_fetch_array($sql))  
  7.         {  
  8.         $msgID= $row['id'];  
  9.         $msg= $row['message'];  
  10.     ?>  
  11.           
  12.         <div id="<?php echo $msgID; ?>"  align="left" class="message_box" >  
  13. <span class="number"><?php echo $msgID; ?></span><?php echo $msg; ?>   
  14. </div>  
  15.           
  16.   
  17. <?php  
  18. }  
  19. ?>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_86.html