jQuery实现无限往下滚动效果代码
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery实现无限往下滚动效果代码,涉及jQuery基于ajax交互操作数据库数据及页面元素动态变换的相关技巧,需要的朋友可以参考下
本文实例讲述了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(); }) .ajaxS(function(){ isOK=true; $("#loading2").hide(); }) $(window).scroll(function(){ //控制load层 document.getElementByIdx_x_x("loading").style.=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) }, suess: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>") } }//suess })//ajax }//if(isOK) else { $(".loading").append("<br/>~~你是向下滚了,上次还没有执行完毕,等等吧<br/>") } }// 触法ajax条件 })//scroll })//Jquery 结束处
更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程