济南软月建站,佛山城市建设工程有限公司,wordpress百万数据,2024年新手机上市时间表上网时经常会看到许多酷炫的网页#xff0c;其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容#xff0c;一直都很好奇是怎么样做到的#xff0c;于是自己也尝试着写了一下。 先上个完整代码吧#xff1a; !DOCTYPE html
html langen其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容一直都很好奇是怎么样做到的于是自己也尝试着写了一下。 先上个完整代码吧 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlescript srcjs/jquery.min.js/scriptstylediv{width:900px;height:800px;}li{list-style-type:none;}/style
/head
body idcontainerdivlfjakjflkf/divscript//获取滚动条当前的位置 function getscrolltop() { var scrolltop 0; if (document.documentElement document.documentElement.scrollTop) { scrolltop document.documentElement.scrollTop; } else if (document.body) { scrolltop document.body.scrollTop; } return scrolltop; } //获取当前可视范围的高度 function getclientheight() { var clientheight 0; if (document.body.clientHeight document.documentElement.clientHeight) { clientheight Math.min(document.body.clientHeight, document.documentElement.clientHeight); } else { clientheight Math.max(document.body.clientHeight, document.documentElement.clientHeight); } return clientheight; } //获取文档完整的高度 function getscrollheight() { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); } window.onscroll function () { if(getscrolltop() getclientheight() getscrollheight()) { var xhr;if(window.XMLHttpRequest){xhr new XMLHttpRequest();}else{xhr new ActiveXObject(Microsoft.XMLHTTP)};xhr.open(get,load.json,true);xhr.onreadystatechange function(){if(xhr.readyState 4 xhr.status200){var txt xhr.responseText;var str ;// 由于获取到的是json字符串因此必须现将其转换为json对象。$.each(JSON.parse(txt),function(key,value){str li姓名value[0].name。年龄为value[0].age。性别为value[0].sex/libr/br/;$(body).append(str) })}}xhr.send(); }} /script
/body
/html load.json文件的代码如下 {person:[{name:tom,age:25,sex:男}
]} 好了下面来分析下这段代码其实先是页面加载完毕会有一部分内容然后滑动滚动条一直到文档可视区域高度滚动条距离文档顶部高度 等于 文档总高度时 异步加载一个json文件的内容。 这里有几个要点1、获取文档的完整高度。2、获取文档可视区域高度。3、获取滚动条距离文档顶部的高度。4、判断滚动条是否滑动到页面底部如到了底部则异步加载json文件。5、需要将异步加载的json文件渲染到页面中由于获取到的是json字符串因此需要使用JSON.parse()方法先将其转换为json对象才可以使用$.each()方法进行遍历然后逐个获取数据。 其实我这里获取文档高度、可视区域高度以及滚动条距离文档顶部高度使用js写的相对要复杂点如果用jQuery写的话会是很简洁的如 获取文档完整高度可以使用$(document).height(); 获取文档可视区域高度可以使用$(window).height(); 获取滚动条距离文档顶部的高度可以使用$(window).scrollTop()。转载于:https://www.cnblogs.com/jf-67/p/7743088.html
