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>
(责任编辑:最模板) |
------分隔线----------------------------