您的位置：首页 > Web前端 > JQuery

用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博) [复制链接]

2016-03-21 11:04 886 查看

首先要应用jquery.min.js类库，如果本地没有，也可以直接引用下面地址<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>。ortant; margin-bottom: 0px !important; margin-left: 10px !important;" >// - -!,你懂的.

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");

});
ortant;" >复制代码这是前台js代码，下面我稍微的解释一下代码：count是定义的数据总数，定义两个div，一的div用来追加数据，一个div用来判断滚动条的位置，再建一个*.ashx文件用来处理程序并返回相应的数据，根据此数据我们肯定判断加载情况，滚动追加完成后我还多加了一个"点击加载更多的功能..."，此功能实现也与上面差不多...代码都在上面，供大家参考。

　　注意：为了防止滚动事件一直会被执行，所以才定义了一个loaded来控制滚动事件的执行。

基于此可以实现很多功能效果，大家可以分享下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航