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 权威指南(第四版) 读书笔记
Aug 11 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
原生JS实现烟花效果
Mar 10 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 SEO优化之URL优化方法
2011/04/21 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
基本DOM节点操作
2017/01/17 Javascript
javascript编写简易计算器
2017/05/06 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
vuex实现购物车功能
2020/06/28 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
numpy.random模块用法总结
2019/05/27 Python
Python中字符串List按照长度排序
2019/07/01 Python
python写入文件自动换行问题的方法
2019/07/05 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
什么是makefile? 如何编写makefile?
2013/01/02 面试题
小学毕业家长寄语
2014/01/19 职场文书
无私奉献演讲稿
2014/09/04 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
房屋所有权证明
2015/06/19 职场文书
小学总务工作总结
2015/08/13 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript