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 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
javascript中闭包closure的深入讲解
Mar 03 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
python使用KNN算法手写体识别
2018/02/01 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
实践Vim配置python开发环境
2018/07/02 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
军训感想500字
2014/02/20 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
安全保证书格式
2015/02/28 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js