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 ajax方式直接提交整个表单核心代码
Aug 15 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
JavaScript Tab菜单实现过程解析
May 13 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 缓冲的免费实现方法
2006/10/09 PHP
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
javascript实现计算器功能
2020/03/30 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
nohup的用法
2012/11/26 面试题
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
毕业生找工作求职信
2014/08/05 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Redis Cluster 集群搭建你会吗
2021/08/04 Redis