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 相关文章推荐
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
JavaScript如何操作css
Oct 24 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 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
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
php上传图片类及用法示例
2016/05/11 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python Process多进程实现过程
2019/10/22 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python文件及目录操作代码汇总
2020/07/08 Python
详解python UDP 编程
2020/08/24 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
学术会议邀请函范文
2014/01/22 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
争先创优活动总结
2014/08/27 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang