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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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数组内存耗用太多问题的解决方法
2010/04/05 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python实现数据分析与建模
2019/07/11 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
网络维护中文求职信
2014/01/03 职场文书
作弊检讨书1000字
2014/02/01 职场文书
法人授权委托书样本
2014/09/19 职场文书
出差报告怎么写
2014/11/06 职场文书
个人党性分析总结
2015/03/05 职场文书
永不妥协观后感
2015/06/10 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript