最近用新浪微博的时候,看了下微博滚动获取微博信息的功能,正好苹果巴士的客户想做一个差不多的功能,所以就分析了一下,大概思路是根据滚动条滚动事件来触发获取微博的AJAX,然后自动添加数据到页面,当然了,如果刷新页面的话,又会重新加载。

下面是研究的代码结果,大家可以参考下:

 

  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>仿照新浪微博长微博分页功能</title> 
  6. </head> 
  7.  
  8. <div style="width:200px;height:400px;background-color:#999999;overflow:auto;" id="outer">  
  9.     <div style="margin-top:200px;width:100px;height:500px;background-color:#eee;" id="inner">  
  10.         微博内容在这里。  
  11.     </div> 
  12. </div> 
  13. <p> 
  14.   <script type="text/javascript">  
  15.   //请保留著作权,作者:苹果巴士 www.ipkbus.com jeffxie@gmail.com 
  16.   //本代码目前不兼容IE6,更强大的功能请自行改进代码. 
  17.     var outer_div = document.getElementById("outer");//根据div的滚动条进行滚动 
  18.     var body_div = document.body;//根据body的滚动条进行判断 
  19.     body_div.onscroll=scrollValue
  20.     outer_div.onscroll=scrollValue
  21.     //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件  
  22.     var divscrollValue = document.getElementById("inner"); 
  23.     //onscroll事件的处理函数  
  24.     function scrollValue() { 
  25.         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 
  26.         if(scrollTop<50
  27.         { 
  28.             divscrollValue.innerHTML="苹果巴士里旧的微博哦"
  29.         } 
  30.         else{ 
  31.             divscrollValue.innerHTML"<span style='color:red'>苹果巴士加载微博数据中...</span>";  
  32.         } 
  33.     } 
  34.     scrollValue(); 
  35.     //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0  
  36. </script>  
  37. </p> 
  38. <p>&nbsp;</p> 
  39. <p>&nbsp;</p> 
  40. <p>&nbsp;</p> 
  41. <p>&nbsp;</p> 
  42. <p>&nbsp;</p> 
  43. <p>&nbsp;</p> 
  44. <p>&nbsp;</p> 
  45. <p>&nbsp;</p> 
  46. <p>&nbsp;</p> 
  47. <p>&nbsp;</p> 
  48. <p>&nbsp;</p> 
  49. <p>&nbsp;</p> 
  50. <p>&nbsp;</p> 
  51. <p>&nbsp;</p> 
  52. <p>&nbsp;</p> 
  53. <p>&nbsp;</p> 
  54. <p>&nbsp;</p> 
  55. <p>&nbsp;</p> 
  56. <p>&nbsp;</p> 
  57. <p>&nbsp;</p> 
  58. <p>&nbsp;</p> 
  59. <p>&nbsp;</p> 
  60. <p>&nbsp;</p> 
  61. </body> 
  62. </html>