`
lishumingwm163.com
  • 浏览: 337694 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

jquery 滚动条加载数据

    博客分类:
  • js
 
阅读更多

无刷新动态加载数据,滚动条加载

滚屏加载更多数据,适合评论等页面

本例的数据库很简单,一看就明了

 

 

PHP Code
  1. <div id="container">
  2. <?php
  3. $query=mysql_query("select * from content order by id desc limit 0,10");
  4. while ($row=mysql_fetch_array($query)) {
  5. ?>
  6. <div class="single_item">
  7. <div class="element_head">
  8. <div class="date"><?php echodate('m-d H:i',strtotime($row['updatetime']));?></div>
  9. <div class="author"><?php echo$row['id'];?></div>
  10. </div>
  11. <div class="content"><?php echo$row['message'];?></div>
  12. </div>
  13. <?php } ?>
  14. </div>
  15. <div class="nodata"></div>
js文件
 
JavaScript Code
  1. <script type="text/javascript">
  2. $(function(){
  3. var winH = $(window).height(); //页面可视区域高度
  4. var i = 1;
  5. $(window).scroll(function () {
  6. var pageH = $(document.body).height();
  7. var scrollT = $(window).scrollTop(); //滚动条top
  8. var aa = (pageH-winH-scrollT)/winH;
  9. if(aa<0.02){
  10. $.getJSON("result.php",{page:i},function(json){
  11. if(json){
  12. var str = "";
  13. $.each(json,function(index,array){
  14. var str = "<div class=\"single_item\"><div class=\"element_head\">";
  15. var str = str + "<div class=\"date\">"+array['date']+"</div>";
  16. var str = str + "<div class=\"author\">"+array['author']+"</div>";
  17. var str = str + "</div><div class=\"content\">"+array['content']+"</div></div>";
  18. $("#container").append(str);
  19. });
  20. i++;
  21. }else{
  22. $(".nodata").show().html("别滚动了,已经到底了。。。");
  23. returnfalse;
  24. }
  25. });
  26. }
  27. });
  28. });
  29. </script>

result.php

PHP Code
  1. <?php
  2. include("conn.php");
  3. $page = intval($_GET['page']); //获取请求的页数
  4. $start = $page*5;
  5. $query=mysql_query("select * from content order by id desc limit $start,5");
  6. while ($row=mysql_fetch_array($query)) {
  7. $arr[] = array(
  8. 'content'=>$row['message'],
  9. 'author'=>$row['id'],
  10. 'date'=>date('m-d H:i',strtotime($row['updatetime']))
  11. );
  12. }
  13. echo json_encode($arr); //转换为json数据输出
  14. ?>


原文地址:http://www.freejs.net/article_jquerywenzi_52.html

分享到:
评论

相关推荐

    jquery滚动滚动条加载数据 类似瀑布流

    **jQuery滚动加载数据实现瀑布流布局** 在网页设计中,瀑布流(Masonry)布局是一种流行的方式,它能展示信息时让页面看起来更加美观且有层次感,类似于QQ空间动态加载数据的效果。当用户滚动页面时,内容会随着...

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以  别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this)....

    jquery滚动条动态图片加载.rar

    用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...

    jQuery无限滚动加载图片瀑布流代码

    **jQuery无限滚动加载图片瀑布流代码详解** 在网页设计中,瀑布流布局(Masonry Layout)因其独特的展示方式,能够使页面元素排列得既美观又节省空间,特别适合用于图片展示类网站。jQuery无限滚动加载图片瀑布流...

    jQuery局部div滚动加载远程数据

    "jQuery局部div滚动加载远程数据"这个主题是关于如何利用jQuery实现一个功能,即当用户滚动到页面的某个div区域时,动态地从服务器加载更多的数据,这种技术通常称为"无限滚动"或"滚动加载"。这个特性在新闻网站、...

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    在本示例中,我们将讨论如何结合jQuery和AJAX技术,实现在ASP.NET环境中,当用户滚动滚动条时,下拉列表控件自动加载更多数据的功能。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在...

    jQuery懒加载插件页面滚动加载数据代码

    jQuery懒加载插件是一种优化网页性能的技术,它允许我们在用户滚动页面时按需加载内容,而不是一次性加载所有数据。这种技术对于拥有大量图片、视频或动态数据的网页尤其有用,因为它减少了初始页面加载时间,提高了...

    jquery给表格加滚动条

    本示例将详细讲解如何利用jQuery库为普通的HTML表格添加滚动条,以实现数据的高效浏览。 一、jQuery简介 jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的设计...

    jQuery table scroll表格插件内容部分加滚动条

    它允许用户在表格内容区域添加垂直或水平滚动条,以便在有限的空间内查看更多的数据,而不会使页面显得过于拥挤。本文将详细介绍如何使用jQuery Table Scroll插件以及相关的技术要点。 首先,要使用jQuery Table ...

    Jquery上拉滚动加载更多

    // 获取当前滚动条位置 if (scrollTop + windowHeight &gt;= documentHeight) { // 检查是否接近底部 // 加载更多数据的逻辑 } ``` 当满足条件时,意味着用户已经滚动到了页面底部,接下来就是加载更多数据的部分。...

    页面滚动到底部自动加载数据

    在实现滚动加载中,JQuery的`$(window).scroll()`事件监听用户的滚动行为,`$(document).height()`获取文档总高度,`$(window).height()`获取窗口可视区域高度,以及`$(window).scrollTop()`获取滚动条距离顶部的...

    jquery动态滚动条加载效果.zip

    《jQuery动态滚动条加载效果详解》 在网页设计与开发中,用户界面的交互体验是至关重要的,其中滚动条加载效果就是提升用户体验的一种巧妙手段。本篇将详细讲解如何使用jQuery实现动态滚动条加载效果,以及相关的...

    jQuery无限滚动加载图片瀑布流代码.zip

    无限滚动加载,也称为“滚动监听”或“懒加载”,通过监听滚动条位置,判断是否接近页面底部。一旦达到设定的阈值,就会通过Ajax异步请求获取新的数据(通常是JSON格式),然后使用JavaScript动态插入到页面中。这种...

    jquery 滚动条动态图片加载(模拟淘宝商城图片加载)

    用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...

    jquery实现数据动态加载分页的完整版

    2. **jQuery事件监听**:绑定滚动事件到窗口或指定的滚动元素,当用户滚动到页面底部时触发加载新数据的函数。 ```javascript $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == ...

    jquery 滚动广告图片

    根据提供的文件信息,本文将详细解析“jquery滚动广告图片”的实现原理、代码结构及关键功能。此案例展示了如何使用jQuery库来实现一个自动滚动显示图片的广告轮播效果。 ### 一、整体概述 该案例的目标是创建一个...

    jquery滚动加载数据的方法

    本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载...

    jquery scrollpagination实现的前台数据滚动加载,费了很大劲啊

    `pageSize`参数定义了每次滚动加载的数据条数。`loadingStart`、`loadingComplete`和`loadingError`则是回调函数,分别在加载开始、结束和出错时调用。 在服务器端,你需要创建一个API接口`data.php`,它负责根据...

    15个带示例的jQuery滚动条插件

    标题中的“15个带示例的jQuery滚动条插件”指的是在网页设计中,使用jQuery库来增强或替换浏览器默认滚动条的15种不同的插件。这些插件允许开发者自定义滚动条的样式、行为,提升用户体验,并且通常会提供实际运行的...

    jquery轻量级上下(左右)滚动条插件

    这款轻量级的滚动条插件则是基于jQuery构建的,旨在为网页中的滚动条添加更多功能和视觉效果,而不增加过多的页面负担。 该插件的核心功能包括: 1. **自定义样式**:用户可以根据需要定制滚动条的外观,包括颜色...

Global site tag (gtag.js) - Google Analytics