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 相关文章推荐
js计数器代码
Nov 04 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
javascript中this指向详解
Apr 23 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP中串行化用法示例
2016/11/16 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python SocketServer源码深入解读
2019/09/17 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python 实现兔子生兔子示例
2019/11/21 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
使用Python发现隐藏的wifi
2020/03/04 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
火车来了教学反思
2014/02/11 职场文书
青春无悔演讲稿
2014/05/08 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书