jQuery实现无限往下滚动效果代码


Posted in Javascript onApril 16, 2016

本文实例讲述了jQuery实现无限往下滚动效果的方法。分享给大家供大家参考,具体如下:

这是仿照腾讯的微薄上的一个效果。滚动条可以无限的网下滚动并且无刷不断从数据库中获取新的数据。

<style type="text/css">
body{ font-family: "Trebuchet MS",verdana,arial;}
#loading{ display:none; font-weight:bold;color:#FF0000;}
p { padding:10px;}
</style>
<p id="loading">loading data... </p>
$(function(){
   var isOK=true;//记录上次访问是否已经结束,如果ajax也有线程就好了
   var scrollH=0;//判断是往上滚还是往下滚
   var intI=1;
  // loading层是固定在页脚的记录牌
   $(".loading").css({"right":"2","bottom":0});
   $(".loading")
   .ajaxStart(function(){
    isOK=false;//执行ajax的时候把isOK设置成false防止第一次没有执行完的情况下执行第二次易出错
    $("#loading2").show();
     })
   .ajaxStop(function(){
     isOK=true;
     $("#loading2").hide();
     })
  $(window).scroll(function(){
   //控制load层
   document.getElementByIdx_x_x("loading").style.top=document.documentElement.scrollTop+"px";
    //触法ajax条件 可以换算成百分比更好
  if($(document).height()-$(window).scrollTop()-document.documentElement.clientHeight<240){
   //当前位置比上次的小就是往上滚动不要执行ajax代码块
   if(scrollH>document.documentElement.scrollTopY)
   {
    $(".loading").append("<br/>向上滚不执行")
    scrollH=document.documentElement.scrollTop;//记录新位置
    return;
    }
   if(isOK)//如果是第一次或者上次执行完成了就执行本次
   {
     scrollH=document.documentElement.scrollTop;//记录新位置
     $(".loading").append("<br/>~~<span style='background:#red'>执行了ajax。。。。。</span><br/>")
     isOK=false;
   $.ajax({
     type:"POST",
     dataType: 'xml',
     url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS",
     error:function(e){
      $(".main").append('发生了错误:'+e)
      },
     success:function(data){
      try{
      $(data).find("Table").each(function(i){
         $(".main").append("结果:"+$(this).children('txtTitle').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody1').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody2').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody3').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('txtBody4').text()+"<br/>");
         $(".main").append("结果:"+$(this).children('ID').text()+"<br/>");
         })//each
      }
      catch(e){
       $(".main").append("<p>"+e+"</p>")
      }
      }//success
     })//ajax
     }//if(isOK)
     else
     {
      $(".loading").append("<br/>~~你是向下滚了,但是上次还没有执行完毕,等等吧<br/>")
     }
   }// 触法ajax条件
   })//scroll
})//Jquery 结束处

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
JS实现瀑布流布局
Oct 21 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
jQuery遍历json的方法分析
Apr 16 #Javascript
jquery对dom节点的操作【推荐】
Apr 15 #Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 #Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
You might like
PHP漏洞全解(详细介绍)
2012/11/13 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python性能优化技巧
2015/03/09 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Python操作Excel的学习笔记
2021/02/18 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
毕业生物理教师求职信
2013/10/17 职场文书
毕业生找工作的自我评价
2013/10/18 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
2014年自我评价
2014/01/04 职场文书
环保建议书作文300字
2015/09/14 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书