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

最近用新浪微博的时候，看了下微博滚动获取微博信息的功能，正好苹果巴士的客户想做一个差不多的功能,所以就分析了一下，大概思路是根据滚动条滚动事件来触发获取微博的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>

 <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= "苹果巴士加载微博数据中...";
 }
 }
 scrollValue();
 //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0
</script>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

(责任编辑：最模板)

热门搜索:

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