asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)


Posted in Javascript onMarch 14, 2012

自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据
下面开讲:

首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。

好吧,下面我们看下核心代码:

// - -!,你懂的. 
var count=<%=allcount %>; 
var times=0; 
var loaded = true; 
function Add_Data() 
{ 
var top = $("#main_left_add").offset().top; 
if(loaded && ($(window).scrollTop() + $(window).height() > top)) 
{ 
$("#main_left_add").html("数据加载中..."); 
times++; 
$.ajax( 
{ 
type: "POST", 
dataType: "text", 
url: "weibo.ashx", 
data: "userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=1", 
success: function(data) 
{ 
//alert("第"+times+"次追加数据."); 
if(data == "没有数据") 
{ 
$("#main_left_add").css("display","none"); 
loaded=false; 
AddEffect(); 
} 
else if(data == "") 
{ 
$("#main_left_add").html("点击加载更多..."); 
$("#main_left_add").css("display","block"); 
loaded=false; 
AddEffect(); 
} 
else if(data != "") 
{ 
$("#main_left_down").append(data); 
AddEffect(); 
} 
} 
} 
); 
} 
} 
$(window).scroll(Add_Data); 
//点击追加数据 
$("#main_left_add").click(function(){ 
$.ajax({ 
type: "POST", 
dataType: "text", 
url: "weibo.ashx", 
data:"userid="+<%=hf.Value %>+"&touserid="+<%=hf1.Value %>+"&count="+count+"×="+times+"&type=2", 
success: function(data){ 
if(data=="没有数据") 
{ 
$("#main_left_add").css("display","none"); 
AddEffect(); 
} 
else 
{ 
$("#main_left_down").append(data); 
$("#main_left_add").html("点击加载更多..."); 
AddEffect(); 
} 
} 
}); 
//鼠标移动效果 
$("#main_left_add").mouseover(function(){ 
$(this).css("background-color","#e4eef8"); 
}); 
$("#main_left_add").mouseout(function(){ 
$(this).css("background-color","#f0f5f8"); 
});

这是前台js代码,下面我稍微的解释一下代码:count是定义的数据总数,定义两个div,一的div用来追加数据,一个div用来判断滚动条的位置,再建一个*.ashx文件用来处理程序并返回相应的数据,根据此数据我们肯定判断加载情况,滚动追加完成后我还多加了一个"点击加载更多的功能...",此功能实现也与上面差不多...代码都在上面,供大家参考。

注意:为了防止滚动事件一直会被执行,所以才定义了一个loaded来控制滚动事件的执行。

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
js前端面试之同步与异步问题详解
Apr 03 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 #Javascript
10款非常有用的 Ajax 插件分享
Mar 14 #Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 #Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 #Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 #Javascript
Node.js实战 建立简单的Web服务器
Mar 08 #Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
php 静态变量的初始化
2009/11/15 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
前端面试知识点目录一览
2019/04/15 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python中sleep函数用法实例分析
2015/04/29 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python 的类、继承和多态详解
2017/07/16 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python调用webservice接口的实现
2019/07/12 Python
在django模板中实现超链接配置
2019/08/21 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
公司任命书范本
2014/06/04 职场文书
2014年科普工作总结
2014/12/06 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书