search

Home >Web Front-end >JS Tutorial >jQuery implements the data loading effect of imitating the Weibo drop-down scroll bar_jquery

jQuery implements the data loading effect of imitating the Weibo drop-down scroll bar_jquery

WBOY
WBOYOriginal
2016-05-16 15:23:301229browse

The example in this article describes how jQuery can imitate the data loading effect of the Weibo drop-down scroll bar. Share it with everyone for your reference, the details are as follows: 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>滚动条距离底部</title> 
<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var i = 4; 
$(window).bind("scroll", function (event) { 
//滚动条到网页头部的 高度，兼容ie,ff,chrome 
var top = document.documentElement.scrollTop + document.body.scrollTop; 
//网页的高度 
var textheight = $(document).height(); 
// 网页高度-top-当前窗口高度  
if (textheight - top - $(window).height() <= 100) { 
if (i >= 100) { 
return; //控制最大只能加载到100 
} 
$('#div1').css("height", $(document).height() + 100); 
i++;  
//可以根据实际情况，获取动态数据加载 到 div1中 
$('<div>' + i + '</div>').appendTo($('#div1')); 
} 
}); 
}) 
</script> 
<style> 
#div1 div{ font-size:100px; background:#ccc;margin-top:5px} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="height: 1000px;" id="div1"> 
<div> 
1</div> 
<div> 
2</div> 
<div> 
3</div> 
<div> 
4</div> 
</div> 
</form> 
</body> 
</html>

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Native js and jQuery implement fade-in and fade-out carousel effect_jqueryNext article：Native js and jQuery implement fade-in and fade-out carousel effect_jquery

Related articles

See more