拖动滚动条加载数据代码实例
此种效果应该不会陌生,比如本站的特效版块就是使用的类似效果,就是当向下拖动滚动条的时候,能够实时的加载相应的内容,这样的话可以节省带宽,没有必要加载全部的内容,而是根据需要进行加载,下面通过一个简单的实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>拖动滚动条加载数据代码实例-前端教程网</title> <style type="text/css"> #father div { font-size:100px; background:#ccc; margin-top:5px; text-align:center; } #top{ width:30px; height:1000px; background-color:green; margin:0px auto; text-align:center; color:red; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ var i=0; $(window).bind("scroll",function(event) { var top=document.documentElement.scrollTop+document.body.scrollTop; var textheight=$(document).height(); if(textheight-top-$(window).height()<=100) { if(i>=100) { return; } i++; $('<div>' + i + '</div>').appendTo($('#father')); } }) }) </script> </head> <body> <div id="top">前端教程网欢迎您,请向下拖动滚动条查看效果</div> <form id="form1"> <div id="father"> </div> </form> </body> </html>
以上代码实现了我们想要的功能,当向下拖动滚动条的时候,能够实时的加载一些内容,当然在实际应用中,记载的内容一般都是从数据库读取的,这里只是演示一下实现过程。下面简单介绍一下如何实现此效果。
一.实现原理:
当向下拖动滚动条的时候,会触发scroll事件,进而执行注册的scroll事件处理函数,此函数可以判断网页底部被隐藏内容的高度,如果小于指定的高度值,就会向father元素中添加div元素,主要原理大体如此,具体可以参阅代码注释自行理解。
二.代码注释:
1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.var i=0;,声明一个变量,将将变量的值赋值为0。
3.$(window).bind("scroll",function(){}),为窗口注册scroll事件处理函数。
4.var top=document.documentElement.scrollTop+document.body.scrollTop,可以获取网页向上滚动的尺寸,使用了兼容性写法。
5.var textheight=$(document).height(),获取网页的高度。
6.if(textheight-top-$(window).height()<=100){},网页的高度减去网页向上滚动的尺寸再减去窗口的高度,就是网页底部被隐藏的尺寸,如果这个值小于等于100,那么就会执行大括号中的代码。
7.if(i>=100){return},如果i的值大于等于100,就取消拖动加载内容的效果。
8.i++,每次加载都会使i的值加1。
9.$('<div>' + i + '</div>').appendTo($('#father')),向father元素中加载内容。
三.相关阅读:
1.scroll事件可以参阅jQuery scroll事件一章节。
2.height()函数可以参阅jQuery height()方法一章节。
3.appendTo()函数可以参阅jQuery appendTo()方法一章节。
4.document.documentElement.scrollTop参阅document.documentElement.scrollTop浏览器兼容 一章节。
拖动滚动条加载数据代码实例,这样的场景在实际项目中还是用的比较多的,关于拖动滚动条加载数据代码实例就介绍到这了。
拖动滚动条加载数据代码实例属于前端实例代码,有关更多实例代码大家可以查看。