最模板 - 外贸网站建设,外贸网站模板

最模板

当前位置: 首页 > 建站教程 > php教程 >

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

时间:2014-07-08 09:35来源:未知 作者:最模板zuimoban 点击:
最近用新浪微博的时候,看了下微博滚动获取微博信息的功能,正好苹果巴士的客户想做一个差不多的功能,所以就分析了一下,大概思路是根据滚动条滚动事件来触发获取微博的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>

(责任编辑:最模板)
------分隔线----------------------------
栏目列表
推荐内容
  • php常用正则表达式

    这里面有数字,整数,字母,数字+字母 超级链接 电话号码 手机等验证有需要的朋友可以参考一下...

  • php中向数组中插入一元素程序代码

    本文章这里是一个己排序好的二维数据,我们要向数组中插入一个元素这个保存到数据中后还...

  • php接收表单提交数据实例详解

    在php中表单提交数据有几种,一种是post和get方式,下面我来给各位php初学者详细介绍利用get,pos...

  • phpMyAdmin简明安装教程

    phpMyAdmin 就是一种 MySQL 数据库的管理工具,安装该工具后,即可以通过 web 形式直接管理 MySQ...

  • php浮点数四舍五入函数

    本文章介绍了在php中浮点数四舍五入的两个常用的函数round与此同时ceil函数,可能小数保留位数...

  • PHP购物车产生代码

    应一网友的要求,将其发的一段购物车类代码进行简单的分析,希望对需要的新手们有所帮助...