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中的isXX系列
Aug 01 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 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
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python访问抓取网页常用命令总结
2017/04/11 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
酒店副总经理岗位职责范本
2014/02/04 职场文书
大学生秋游活动方案
2014/02/17 职场文书
社区党务公开实施方案
2014/03/18 职场文书
个性车贴标语
2014/06/24 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
领导工作表现评语
2015/01/04 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
关爱空巢老人感想
2015/08/11 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB