主页 > 知识库 > 浏览器窗口滚动加载数据采用异步形式从后台加载数据

浏览器窗口滚动加载数据采用异步形式从后台加载数据

热门标签:电销机器人 数据 广州销售外呼系统定制 ai电销机器人对贷款有帮助吗 怎样给陕西地图标注颜色 地图标注多少钱一张 福州人工智能电销机器人加盟 宿迁智能外呼系统排名 400电话办理信任翰诺科技 云狐人工智能电话机器人
以下滚动效果为在网上查找。

在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据
复制代码 代码如下:

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %>

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">
head runat="server">
title>滚动加载数据库数据/title>
script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">/script>
script src="../Scripts/jquery-1.4.1.js" type="text/javascript">/script>
script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript">/script>
script type="text/javascript">
$(document).ready(function () {

var range = 50; //距下边界长度/单位px
var elemt = 500; //插入元素高度/单位px
var maxnum = 20; //设置加载最多次数
var num = 1;
var totalheight = 0;
var main = $("#content"); //主体元素
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)

totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if (($(document).height() - range) = totalheight num != maxnum) {
$.ajax({
url: "../demo/HandlerDemo.ashx",//显示数据的方法页
type: "GET",
data: "name=json",
dataType: "json",
//cache: false,
success: function (data) {
data = eval(data);
var varHtml = "";
varHtml = "ul>"
$(data).each(function (i) {
varHtml += "li>" + data[i].ID + ":" + data[i].Event + "/li>"; //ID 和Event为数据库映射的字段
});
varHtml += "/ul>";
main.append("div style='border:0px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "br />"+varHtml + "---" + num + "/div>");
},
error: function () {
alert("error");
}

});

num++;
}
});
});
/script>
style type="text/css">
li
{
list-style-type:none;
float:left;
padding-left:20px;

}
/style>
/head>
body>
form id="form1" runat="server">
div id="content" style="height:960px">
div id="follow">this is a scroll test;br/> 页面下拉自动加载内容/div>
div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV/div>
/div>

/form>
/body>
/html>
您可能感兴趣的文章:
  • EASYUI TREEGRID异步加载数据实现方法
  • struts2+jquery+json实现异步加载数据(自写)
  • asp.net 使用js分页实现异步加载数据
  • 自写的jQuery异步加载数据添加事件
  • Blocksit插件实现瀑布流数据无限( 异步)加载
  • jQuery异步加载数据并添加事件示例
  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

标签:宜春 延安 大兴安岭 曲靖 焦作 绵阳 黄南 新疆

巨人网络通讯声明:本文标题《浏览器窗口滚动加载数据采用异步形式从后台加载数据》,本文关键词  浏览器,窗口,滚动,加载,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《浏览器窗口滚动加载数据采用异步形式从后台加载数据》相关的同类信息!
  • 本页收集关于浏览器窗口滚动加载数据采用异步形式从后台加载数据的相关信息资讯供网民参考!
  • 推荐文章