`
wanghlwin
  • 浏览: 37651 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

模仿新浪微博滚动条到底部加载数据

    博客分类：
  • web
js滚动条事件新浪微博滚动加载 
阅读更多

（转载请注明作者出处）

 

模仿新浪微博滚动条事件的处理，提高用户体验，很不错！写了段测试代码如下：

 

 

 

<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script>

var totalheight = 0; 
function loadData(){ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
    if ($(document).height() <= totalheight) { 
       /*
		load Some data...
	   */
    } 
} 

$(window).scroll( function() { 
	console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); 
	console.log("页面的文档高度 ："+$(document).height());
	console.log('浏览器的高度：'+$(window).height());
	loadData();} ); 
</script>
</head>
<body>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
</body>
</html>
分享到：
| 关于Java调用批处理命令向mysql导入数据的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android模仿新浪微博

    2. SQLite：如果需要本地缓存微博数据，可以使用SQLite数据库，创建表来存储微博信息，便于离线查看。 四、异步处理与生命周期管理 1. AsyncTask：处理网络请求和数据解析时，使用AsyncTask来避免阻塞主线程，提供...

    模仿新浪微博随便看看栏目

    本项目以“模仿新浪微博随便看看栏目”为主题，旨在实现一个类似的功能，让用户能够轻松浏览各种信息。在这个过程中，我们会重点讨论如何利用ListView组件进行自定义，以达到美观且功能丰富的效果。 ListView是...

    模仿新浪微博下拉加载更多数据瀑布流效果

    综上所述，实现模仿新浪微博的下拉加载更多数据的瀑布流效果，需要综合运用HTML、CSS和JavaScript技术，以及Ajax异步请求、响应式设计、性能优化等策略。通过不断迭代和优化，可以创造出流畅且视觉吸引力强的用户...

    jquery仿新浪微博鼠标滚动到底部加载内容.rar

    在用户滚动页面至底部时，无需手动点击“加载更多”按钮，内容会自动分页加载，这被称为“无限滚动”或“滚动加载”。此技术的核心在于利用jQuery库监测页面滚动事件，当用户接近页面底部时触发Ajax请求，从服务器...

    jquery高仿新浪微博图片显示插件

    首先，我们需要理解这款插件的核心理念：模仿新浪微博的图片展示模式。新浪微博的图片加载机制以用户体验为中心，通过延迟加载、预加载和响应式布局等技术，确保图片在不同设备和网络环境下都能快速、流畅地展现。这...

    jQuery仿新浪微博高度自适应滚动代码.zip

    《jQuery仿新浪微博高度自适应滚动代码详解》 在网页开发中，动态的、高度自适应的滚动效果常常能提升用户体验，使页面更具吸引力。"jQuery仿新浪微博高度自适应滚动代码"便是实现这一效果的一种解决方案。它以其...

    上拉加载更多下拉刷新仿新浪微博滚动分页

    "上拉加载更多"功能通常用于列表视图底部，当用户滚动到底部时，会触发更多的数据加载。这一功能对于那些拥有大量数据的列表非常实用，因为它避免了一次性加载所有数据可能导致的性能问题和用户界面卡顿。在实际实现...

    新浪微博文字向下滚动效果

    在新浪微博中，有一种常见的文字滚动效果，它使得信息能在有限的屏幕空间内展示更多的内容，这种效果通常被称为“跑马灯”或“滚动公告”。今天我们将深入探讨如何实现“新浪微博文字向下滚动效果”，主要关注其在...

    jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622

    【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...

    jQuery仿新浪微博大厅滚动效果v2.0

    【jQuery仿新浪微博大厅滚动效果v2.0】是一款基于JavaScript库jQuery实现的动态滚动效果，旨在模拟新浪微博大厅的信息流更新模式。这个效果的核心在于利用jQuery的动画功能和特定的插件来实现信息的平滑滚动，使用户...

    安卓listview相关相关-仿照新浪微博Android客户端个人中心的ScrollView.rar

    本资源"安卓listview相关相关-仿照新浪微博Android客户端个人中心的ScrollView.rar"是开发者为了模仿新浪微博客户端个人中心的滚动视图（ScrollView）而创建的一个示例项目。在实际应用中，ScrollView通常用于承载多...

    jquery仿新浪微博动态显示

    在Web开发中，模拟社交媒体如新浪微博的动态加载效果是一项常见的需求。这涉及到前端JavaScript库jQuery的高效使用，以及Ajax技术来实现数据的异步加载。以下我们将深入探讨如何使用jQuery来实现类似新浪微博的动态...

    JQuery实现仿sina新浪微博新鲜事滚动

    JQuery实现仿sina新浪微博新鲜事滚动

    jQuery实现模仿微博下拉滚动条加载数据效果

    综上所述，实现模仿微博下拉滚动条加载数据效果涉及到多个方面，包括页面结构的搭建、jQuery库的引用、事件绑定、滚动位置的检测、动态数据加载逻辑、元素样式更改以及内容的动态添加等。这些知识点都是在进行网页...

    jQuery仿新浪微博首页滚动留言板插件

    4. **定时器**：为了实现持续滚动的效果，插件可能利用JavaScript的`setInterval`函数来定期更新消息列表，每次移除最旧的一条消息并添加一条新消息，使得整体效果如同一直在滚动。 5. **Ajax异步交互**：为了实时...

    ListView块状滚动条加分批加载数据

    本项目实现了ListView的两个关键特性：块状滚动条（类似微博、QQ微博）和分批加载数据（即无限滚动或下拉加载更多）。下面将详细讲解这两个功能的实现原理及步骤。 **一、ListView自定义滚动条** 1. **创建自定义...

    新浪微博图片展示效果制作

    总结来说，"新浪微博图片展示效果制作"涵盖了前端开发的多个方面：预加载和懒加载技术、瀑布流布局、图片缩略图与全屏查看、图片上传处理、水印添加以及响应式设计。每个环节都需要开发者具备扎实的Web技术基础，...

    新浪微博APP（个人模仿版）

    【标题】：“新浪微博APP（个人模仿版）” 这个标题表明我们正在讨论的是一个个人开发的、模仿新浪微博的应用程序。在IT行业中，模仿大型应用通常是为了学习、实践或创新，这样的项目可以帮助开发者熟悉特定平台的...

    jquery新浪微博图文列表滚动切换效果代码

    "jQuery 微博图文列表滚动切换效果"是常见的一种网页交互设计，它模拟了类似新浪微博的展示方式，通过滚动页面时，列表中的图片和文字内容自动平滑切换，为用户呈现丰富的信息流体验。 一、jQuery库的介绍 jQuery ...

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

    页面滚动到底部自动加载数据，也被称为无限滚动或滚动加载，是现代网页设计中常见的一种交互方式。这种技术允许用户在浏览网页时无需点击分页按钮，只需将页面滚动到最底部，更多内容就会自动加载出来，提高了用户...

Magicbox
Global site tag (gtag.js) - Google Analytics