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中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
javascript实现简单的进度条
Jul 02 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php获取后台Job管理的实现代码
2011/06/10 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python中的heapq模块源码详析
2019/01/08 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
django的model操作汇整详解
2019/07/26 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python 变量的创建过程详解
2019/09/02 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
管理学院毕业生自荐信范文
2014/03/10 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
学校课外活动总结
2014/05/08 职场文书
银行自荐信怎么写
2015/03/05 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
python实现自定义日志的具体方法
2021/05/28 Python