jquery 加载数据-拖动滚动条加载数据代码instance_JS实例

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

这样的疗效大家应该不会陌生。 例如，本站的特效部分就采用了类似的效果，即向上拖动滚动条时，可以实时加载相应的内容。 这样就可以节省带宽，而且不需要加载所有Content，而是根据需要加载，下面将通过一个简单的例子来介绍如何实现这种效果。

代码如下所示：

 
#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;
}
 

 
$(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) { 
        return; 
      } 
      i++; 
      $('
' + i + '
').appendTo($('#father')); 
    } 
  })
}) 
 
 
 
Downzz.com欢迎您，请向下拖动滚动条查看效果
 
 
 
 
 


上面的代码就实现了我们想要的功能。 当滚动条向上拖动时jquery 加载数据jquery 加载数据，可以实时加载一些内容。 事实上，在实际应用中，记录的内容通常是从数据库中读取的。 这里只是演示一下实现过程。 下面简单介绍一下如何实现这个效果。
1、实现原理：
当向上拖动滚动条时，会触发滚动风暴，执行注册的滚动风暴处理函数。 该函数可以确定网页顶部隐藏内容的高度。 如果大于指定的高度值，也会被添加到父元素中。  div元素的主要原理大致相同。 具体可以参考代码注释自行理解。
2.代码注释：
1、$(function(){})，当文档结构完全加载后，执行函数中的代码。

2.vari=0;，声明一个变量，变量的值将被参数化为0。
3、$(window).bind("scroll", function(){})，注册窗口的滚动风暴处理函数。
4、vartop=document.documentElement.scrollTop+document.body.scrollTop，可以获得网页向下滚动的规范，并使用兼容的写法。
5.vartextheight=$(document).height()，获取网页的高度。

6.if(textheight-top-$(window).height()=100){return}，如果i的值小于等于100，则取消拖拽加载内容的效果。
8.i++，每次加载都会将i的值加1。
9. $('
'+我+'
').appendTo($('#father'))，将内容加载到父元素中。