服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > php教程 >

php仿照新浪微博长微博分页功能

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

下面是研究的代码结果,大家可以参考下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>仿照新浪微博长微博分页功能</title> 
    </head> 
     
    <div style="width:200px;height:400px;background-color:#999999;overflow:auto;" id="outer">  
        <div style="margin-top:200px;width:100px;height:500px;background-color:#eee;" id="inner">  
            微博内容在这里。  
        </div> 
    </div> 
    <p> 
      <script type="text/javascript">  
      //请保留著作权,作者:苹果巴士 www.ipkbus.com jeffxie@gmail.com 
      //本代码目前不兼容IE6,更强大的功能请自行改进代码. 
        var outer_div = document.getElementById("outer");//根据div的滚动条进行滚动 
        var body_div = document.body;//根据body的滚动条进行判断 
        body_div.onscroll=scrollValue; 
        outer_div.onscroll=scrollValue; 
        //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件  
        var divscrollValue = document.getElementById("inner"); 
        //onscroll事件的处理函数  
        function scrollValue() { 
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 
            if(scrollTop<50) 
            { 
                divscrollValue.innerHTML="苹果巴士里旧的微博哦"; 
            } 
            else{ 
                divscrollValue.innerHTML= "<span style='color:red'>苹果巴士加载微博数据中...</span>";  
            } 
        } 
        scrollValue(); 
        //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0  
    </script>  
    </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    <p> </p> 
    </body> 
    </html>

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容