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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
script标签属性用type还是language
Jan 21 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
详细分析Node.js 多进程
Jun 22 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
PHP读取MySQL数据代码
2008/06/05 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP中使用curl入门教程
2015/07/02 PHP
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python 下划线的不同用法
2020/10/24 Python
python设置中文界面实例方法
2020/10/27 Python
python 基于wx实现音乐播放
2020/11/24 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
元旦晚会感言
2014/03/12 职场文书
房屋继承公证书
2014/04/10 职场文书
园林系毕业生求职信
2014/06/23 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
户籍证明书标准模板
2014/09/10 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL