`
120153216
  • 浏览: 61740 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

jquery实例:随页面滚动条滚动而自动加载内容

 
阅读更多
<script language="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;}
			$('#div1').css("height", "+=100");i++;
			//可以根据实际情况,获取动态数据加载 到 div1中
			$('<div>' + i + '</div>').appendTo($('#div1'));
		}
	});
});
</script>
分享到:
评论

相关推荐

    页面滚动分页---iScroll实例:下拉刷新,滚动翻页

    2. **滚动分页(Infinite Scroll)**:滚动分页是另一种提高用户体验的方式,它会在用户接近页面底部时自动加载更多内容,模拟无限滚动的效果。iScroll提供了`onEnd`事件,可以在用户滚动到列表底部时触发,从而加载...

    jquery 下拉刷新上拉加载

    5. 更新iScroll的状态,确保滚动条位置正确,并关闭下拉刷新指示器。 需要注意的是,为了提供良好的用户体验,应确保加载新内容的过程尽可能快,避免用户长时间等待。同时,优化网络请求,减少不必要的数据传输,也...

    jQuery实现精美滚动条

    在网页设计中,滚动条是不可或缺的元素,它允许用户浏览超出视口的内容。而一个精美的滚动条不仅能提升用户体验,还能与网站的整体设计风格融为一体,增加美感。本篇文章将详细探讨如何使用jQuery来实现这样的精美...

    jQuery滚动插件

    2. **无限滚动**:也称为“滚动加载”,当用户滚动到页面底部时,自动加载更多内容,无需手动翻页。 3. **滚动监听**:可以监听用户的滚动行为,触发相应的回调函数,例如显示或隐藏导航菜单,或者更新页面某个部分...

    jquery 写 的 滚动条

    标签“滚动条 加载条”表明这个实例可能不仅仅是一个基本的滚动条,可能还包含了加载条功能。加载条通常在数据加载过程中显示,给用户一个进度指示,提升用户体验。这可能意味着在滚动到页面底部或特定位置时,新的...

    php滚动加载加分页小实例

    滚动加载,也称为无限滚动或懒加载,是一种网页设计技术,当用户滚动页面时,新内容会自动加载,无需点击“下一页”按钮。这种技术提高了用户体验,尤其是在处理大量数据时,如社交媒体、新闻网站和电子商务平台。 ...

    jquery+ajax+asp+mysql加载更多。

    这个功能允许用户滚动页面到一定位置时,自动或手动加载更多内容,而不是一次性加载所有内容,从而提高页面加载速度并减少服务器压力。在给定的"jquery+ajax+asp+mysql"场景下,我们可以详细探讨如何实现这种功能。 ...

    Jquery Ajax分页(有实例)

    - 图片分页可能涉及到图片预加载和懒加载技术,确保在用户滚动到相应位置时,图片能够快速加载和展示。 3. **优化技巧** - **缓存**:对经常访问的数据进行缓存,减少不必要的服务器请求。 - **分页参数**:传递...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...

    jQuery仿淘宝商品播放视频页面滚动悬浮视频播放效果

    这通常涉及到一些数学运算,例如使用`$(window).scrollTop()`获取滚动条顶部到页面顶部的距离。 此外,考虑到视频播放的控制,我们还需要处理视频元素的play/pause状态。当页面滚动到视频元素时,视频应该自动开始...

    基于jQuery实现的彩色网页滚动条代码.zip

    综上所述,这个压缩包提供了一个使用jQuery实现彩色网页滚动条的实例,用户可以通过学习和应用其中的代码,为自己的网页增添个性化的滚动条效果。为了充分利用这个资源,需要了解和掌握jQuery的基本用法,以及CSS和...

    jquery 实现滚动条下拉时无限加载的简单实例

    在网页开发中,有时我们需要实现一个功能,当用户滚动页面到底部时,自动加载更多内容,这种技术被称为“无限滚动”或“滚动加载”。在jQuery中,我们可以利用浏览器的滚动事件来实现这一功能。本文将详细讲解如何...

    jQuery的滚动条事件插件jquery-waypoints

    **jQuery的滚动条事件插件:jquery-waypoints** 在网页设计和开发中,用户体验是至关重要的,而良好的交互性能够显著提升用户对网站的满意度。jQuery Waypoints 是一个优秀的JavaScript库,专门用于处理页面滚动时...

    基于jQuery的带滚动条的缩略图排列

    【标题】:“基于jQuery的带滚动条的缩略图排列” 在网页设计中,缩略图的排列和展示是常见的需求,特别是在图片分享、产品展示等场景。利用jQuery这一强大的JavaScript库,我们可以实现动态、交互性强的缩略图排列...

    jquery.nicescroll美化滚动条插件鼠标滑过显示

    `jQuery.nicescroll`插件就是为了解决这个问题而诞生的,它允许开发者轻松地对网页滚动条进行美化,使其在不影响功能的前提下提升网站的整体视觉效果。本篇将详细讲解`jQuery.nicescroll`插件如何实现鼠标滑过显示的...

    jQuery图片懒加载代码

    可以使用`offset().top`获取元素距离顶部的距离,`$(window).scrollTop()`获取当前滚动条的位置,再结合视口高度`$(window).height()`进行比较。 4. **替换图片源**:如果图片在视口内,就用`data-src`中的URL替换`...

    jQuery自定义滚动条完整实例

    本实例将深入讲解如何使用jQuery实现自定义滚动条的功能。首先,我们需要理解jQuery库的基本用法,这里我们使用的是jQuery 1.9.1版本。 1. **HTML结构**: HTML部分包含一个主容器`#div1`,内部有两个子元素:实际...

    jquery分页例子(pager)

    - 动态加载:根据用户滚动页面,实现“无限滚动”或“懒加载”,即在用户接近页面底部时自动加载下一页内容。 6. **自定义扩展**: 虽然这个例子提供了一个基础的分页实现,但开发者可以根据项目需求进行定制,...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    jquery拖动滚动条控制图片滚动及图片放大特效的示例 jquery旋转式图片切换并带图片放大功能 jQuery漂亮网页右上角双层撕角广告代码 jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 jQuery...

Global site tag (gtag.js) - Google Analytics