demo.html
<li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>---------------</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>阅谁问君诵，水落清香浮</p></li> <li style="opacity:0;-moz-opacity: 0;filter: alpha(opacity=0);"><p>+++++++++++++++</p></li>
scrollpagination.js
(function( $ ){
$.fn.scrollPagination = function(options) {
var opts = $.extend($.fn.scrollPagination.defaults, options);
var target = opts.scrollTarget;
if (target == null){
target = obj;
}
opts.scrollTarget = target;
return this.each(function() {
$.fn.scrollPagination.init($(this), opts);
});
};
$.fn.stopScrollPagination = function(){
return this.each(function() {
$(this).attr('scrollPagination', 'disabled');
});
};
$.fn.scrollPagination.loadContent = function(obj, opts){
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
if (mayLoadContent){
if (opts.beforeLoad != null){
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
$.ajax({
type: 'POST',
url: opts.contentPage,
data: opts.contentData,
success: function(data){
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
},
dataType: 'html'
});
}
};
$.fn.scrollPagination.init = function(obj, opts){
var target = opts.scrollTarget;
$(obj).attr('scrollPagination', 'enabled');
$(target).scroll(function(event){
if ($(obj).attr('scrollPagination') == 'enabled'){
$.fn.scrollPagination.loadContent(obj, opts);
}
else {
event.stopPropagation();
}
});
$.fn.scrollPagination.loadContent(obj, opts);
};
$.fn.scrollPagination.defaults = {
'contentPage' : null,
'contentData' : {},
'beforeLoad': null,
'afterLoad': null ,
'scrollTarget': null,
'heightOffset': 0
};
})( jQuery );
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/scrollpagination.js"></script>
<script type="text/javascript">
$(function(){
$('#content').scrollPagination({
'contentPage': 'demo.html', //你要搜索结果的页面
'contentData': {},//你可以通过 children().size() 知道哪里是分页
//谁该怎么滚动？在这个例子中，完整的窗口
'scrollTarget': $(window),
//在页面到达结束之前，从多少像素开始加载？
'heightOffset': 10,
//前负荷，一些功能，可能显示一个加载DIV
'beforeLoad': function(){
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){
//加载后，一些功能的动画结果和隐藏预载的div
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
//如果超过100结果加载停止分页（仅用于测试）
if ($('#content').children().size() > 100){
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
//元件中的延迟元件的褪色代码
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
</script>
</head>
<body>
<div id="demo">
<div style="height:2000px;"></div>
<ul id="content" style=" margin:0 auto; width:800px; color:#f60; background-color:eee;">
<li><p>内容开始</p></li>
</ul>
<div class="loading" id="loading">加载中</div>
<div class="loading" id="nomoreresults">结束了</div>
</div>
</body>
</html>
效果图：
相关推荐
用户无需手动翻页，内容随着滚动自动加载，增加了用户的沉浸感。 8. **前端和后端配合**：前端负责发送请求和处理返回的数据，后端则需要提供一个接口，接收并处理这些请求，返回需要加载的新内容。接口设计应当...
// 如果需要自动轮播 setInterval(function() { var currentIndex = $pages.filter('.active').index(); var nextIndex = (currentIndex + 1) % $pages.length; switchPage(nextIndex); }, 3000); // 每3秒...
5. **动态加载**：如果图片数量较多，为了提高页面加载速度，可以考虑使用懒加载技术。即只有当图片即将进入视口时才开始加载，这可以利用jQuery的scroll或intersection observer API来实现。 6. **响应式设计**：...
"jQ导出PDF自动分页打印代码.zip" 提供的是一套基于jQuery和CSS特效的解决方案，旨在帮助开发者高效地完成这项任务。下面我们将详细探讨这个代码包中的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它...
"JQ 页面上下左右居中的插件"是解决这一问题的一种方法，它利用jQuery库来实现元素在页面上自动适应并保持居中的效果。jQuery是一种强大的JavaScript库，它简化了JavaScript的使用，使得动画效果和DOM操作更加便捷。...
总的来说，JQ瀑布流加载涉及到的技术点包括：jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合，我们可以在网页上实现流畅且美观的瀑布流加载效果，提高用户...
在示例代码中，$(function(){...})是文档就绪事件，确保DOM完全加载后，才执行内部的代码。通过选择器`$('#newMessageDIV')`获取了目标DOM元素，然后使用`.html()`方法动态地添加了音频播放的HTML代码。 最后，针对...
例如，可以在404页面的JavaScript代码中监听页面加载完成的事件，然后在适当的时间间隔后执行window.location.href改变，将用户重定向到其他页面。同时，还可以添加动画效果或其他交互元素，使用户体验更加友好。 ...
6. **性能优化**：学习如何减少页面加载时间，提高响应速度，以及针对移动设备进行性能优化的技巧。 通过这个`jq-mobile案例`，你将能够掌握使用jq-mobile构建移动Web应用的基本技能，并了解到如何结合实际需求，...
8. **性能优化**：避免一次性加载大量图片导致页面加载速度变慢，可以使用懒加载技术，只在图片进入视口时才加载。 通过以上步骤，"图片尺寸自动调整jq"的特效可以实现一个灵活且用户友好的相册展示。这个特效的源...
在网页开发中，用户体验至关重要，尤其是在处理数据加载或者页面跳转时，用户往往需要等待，此时加载等待界面就显得尤为重要。"简单jQuery加载等待转圈页面插件"就是为了解决这个问题而设计的，它能提供一个优雅的、...
1. **初始化**：加载页面时，设置初始状态，如显示第一张幻灯片，隐藏其余幻灯片，并创建指示器。 2. **自动播放**：使用`setInterval`函数定时触发切换幻灯片的函数，实现自动轮播。可以设置合适的间隔时间，比如3...
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，...
通过Ajax，网页可以实现在不重新加载整个页面的情况下，仅更新部分数据或元素，这极大地提升了用户的浏览体验。下面将详细解析如何使用Ajax技术实现页面的定时自动更新。 #### Ajax概述 Ajax（Asynchronous ...
在网页中，当用户滚动到页面底部时，内容会自动加载更多，无需手动翻页，提高了用户体验，尤其适用于展示大量数据或内容的网站，如博客、新闻平台或者电子商务网站。 jQuery是JavaScript的一个轻量级库，它简化了...
- 利用Ajax（Asynchronous JavaScript and XML）技术实现评论的异步加载和提交，避免整个页面刷新。 - 创建一个jQuery事件处理函数，监听用户提交评论的行为，通过Ajax发送请求到服务器。 - 接收服务器返回的评论...
【标题】"jq超炫banner"指的是使用jQuery库创建的具有动态效果的网站横幅，通常用于吸引用户注意力，展示重要信息或广告。...然而，设计时也应注意平衡效果与性能，避免过于复杂的动画影响页面加载速度和用户体验。
接下来，上拉加载更多则是当用户滚动到页面底部时，自动加载更多的内容。这一功能有助于分批加载大量数据，避免一次性加载过多内容导致页面卡顿。实现上拉加载更多的步骤大致如下： 1. **设置底部边界检查**：监测...
本文详细介绍了如何在页面加载完成后使用jQuery自动加载数据的实例。这个过程涉及到的关键知识点包括：页面加载完成的监听、Ajax异步数据请求、服务器端数据的处理以及前端页面动态内容的更新。 首先，页面加载完成...