拉动滚动条加载数据的jquery代码

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>拉动滚动条加载数据</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var i = 4;$(window).bind("scroll", function (event)
{
//滚动条到网页头部的 高度，兼容ie,ff,chrome
var top = document.documentElement.scrollTop + document.body.scrollTop;
//网页的高度
var textheight = $(document).height();
// 网页高度-top-当前窗口高度
if (textheight - top - $(window).height() <= 100) { if (i >= 100) { return;
//控制最大只能加载到100
}
$('#div1').css("height", $(document).height() + 100);i++;
//可以根据实际情况，获取动态数据加载 到 div1中
$('<div>' + i + '</div>').appendTo($('#div1'));
}
});
})
</script>
<style>
#div1 div
{
font-size: 100px;
background: #ccc;
margin-top: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 1000px;" id="div1">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</form>
</body>
</html>

赞 (0)

相关推荐

  • struts2+jquery+json实现异步加载数据(自写)

    复制代码 代码如下: //初始加载页面时 $(document).ready(function(){ //为获取单个值的按钮注册鼠标单击事件 $("#getMessage").click(function(){ $.getJSON("ceshi",function(data){ //通过.操作符可以从data.message中获得Action中message的值 $("#message1").html("<font color='

  • asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

    自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

  • jQuery滑动到底部加载下一页数据的实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script>page_num =page_num+1 ; //页码自动增加,保证下次调用时为新的一页. $.ajax({ type: "get", url: rent_url, data: '2', dataType: "json", success: function (data) { // 查询到的数据总数 rentDataNum = data.count // 每页加载6个 需要加载的页数

  • jquery form 加载数据示例

    部分代码如下 复制代码 代码如下: <form id="fm" method="post" novalidate> <div style="height:26px" class="fitem"> <label>区域:</label> <input class="easyui-combobox" id="areaId" name=&qu

  • jquery Ajax 实现加载数据前动画效果的示例代码

    复制代码 代码如下: $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        url:"ajaxpage.aspx?t=getcity",        dataType:"json",        beforeSend:function(){           $("#vvv").append('&l

  • Asp.net利用JQuery弹出层加载数据代码

    Asp.net利用JQuery弹出层加载数据代码

    首先我们新建一个网站,在网站里面新增一般处理程序,命名为ReadData.ashx.然后在里面输入如下代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Data.SqlClient; //引入命名空间 using System.Data; namespace 加载层 {

  • 拉动滚动条加载数据的jquery代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>拉动滚动条加载数据</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> &l

  • jQuery实现模仿微博下拉滚动条加载数据效果

    本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>滚动条距离底部</title> <script src="jquery-1.6.2.min.js" type="text/javascript&

  • gridpanel动态加载数据的实例代码

    复制代码 代码如下: <script type='text/javascript'>function editEsOrder(options,success,response){if (success){var tagModelManager_maxOrderIdJson=Ext.util.JSON.decode(response.responseText);var orderValue = tagModelManager_maxOrderIdJson.maxOrderId ;Ext.getC

  • Android之ListView分页加载数据功能实现代码

    Android之ListView分页加载数据功能实现代码

    什么是ListView分页加载数据功能呢?在现在的大数据时代,我们不可能把某些数据全部展示到界面,好比我们经常会看的QQ空间一样,当你看动态的时候,系统不可能会把所有好友的动态都展示在上面,你能看到的一般都是最新好友更新的动态,假如你要看非最新的好友动态,通常你都会手指向上滑动屏幕然后去查看,当界面下滑到一定数量的时候,就会看到一个"查看更多",然后突然停顿一下,系统会通过网络去给你刷新其他动态信息,这样的功能我们一般叫做数据下拉刷新功能,也就是我们的分页加载功能,具体的实现是怎样的呢

  • Vue下滚动到页面底部无限加载数据的示例代码

    看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充 本文技术要点 Vue生命周期 axios简单用法 moment.js格式化日期 图片懒加载 结合原生js来写scroll事件 请求节流 创建项目 首先创建一个简单的vue项目 #

  • Qt实现边加载数据边显示页面的示例代码

    目录 1.定义显示定时器 1:定义定时器 2:定时器调用 3:定时器加载数据 2.线程加载数据 3.实时呈现加载进度 做过C++开发的人们都知道,无论是MFC框架还是QT框架,实现加载数据的等待效果都是很麻烦的,不像WEB端轻轻松松一句代码就搞定了.而我们这些做C++的,最常用的方法就是开线程了. 刚开始,我也是采用的开线程的方式,但是,想象总是与事实相悖的. 假设页面展示的数据比较多,导致加载页面时间较长,用户体验度很差,点击了触发按钮之后很长时间才会有响应,总让人误会程序死机了,但真正的原因

  • 使用Bootstrap Tabs选项卡Ajax加载数据实现

    使用Bootstrap Tabs选项卡Ajax加载数据实现

    本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &

  • JavaScript实现无穷滚动加载数据

    JavaScript实现无穷滚动加载数据

    首先实现滚动要借助onscroll事件处理程序. 无穷滚动就是滑动滚动条,实现数据块的无穷加载. 我们以瀑布流的布局来实现无穷加载.瀑布流就是一些等宽不等高的数据块布局.在滚动条下拉时,它会进行加载.那么问题就是在判断什么时候应该加载. 我们首先应该明白瀑布流布局的特点.它将下一个图片总是放在当前列数最低的那一列.所以当加载最后一个蓝色的图片时,也就无疑是最后一个图片了.所以要判断该图片加载到什么程度来触发滚动事件. 图上灰色的表示页面的大小,后面蓝色边框表示窗口的大小.当拖动滚动条时,灰色部分

随机推荐