JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果。。。。。。。。。
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js网页滚动条滚动事件 </title>
<style type="text/css">
#top_div{
position:fixed;
bottom:80px;
right:0;
display:none;
}
</style> <script type="text/javascript"> window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "top_div" );
var loading = document.getElementById("loading"); vv.innerHTML="document.body.scrollHeight:"+document.body.scrollHeight+" body offsetHeight:"+document.body.offsetHeight;
//scrollTop + clientHeight == scrollHeight if( document.body.scrollTop+ document.body.clientHeight >= document.body.scrollHeight) { top_div.style.display = "inline";
if(loading.style.display != "inline"){ loading.style.display = "inline";
count.value=(1+ parseInt(count.value));
setTimeout("addItem(count.value);",2000);
}
} } function addItem(i){ for(var j=0;j<10;j++){
var box = document.createElement("div");
content.appendChild(box);
box.style.cssText = "width:300px;font-size:12px;";
box.innerHTML="<a href='#'>..........."+ i+"</a>" } loading.style.display = "none"; } </script> </head>
<body> <div id="vv"></div> <br /> <a name="top">顶部<a> <div id="top_div"><a href="#top">返回顶部</a></div> <br /> <div id="content"> <a href="#">...........</a> </div> <br /> 这里尽量多些<br />以便页面出现滚动条 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div id="loading" style="position:fixed;bottom:20px;line-height:40px;background-color: #F00;color: #fff; display:none;">
loaing............................................................................................................<input id="count" type='text' value="0"/>
</div> </body>
</html>
JS 判断滚动底部并加载更多效果。。。。。。。。。的更多相关文章
- 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...
- UWP-ListView到底部自动加载更多数据
原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- apiCloud实现加载更多效果,基本完美~
apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...
- RecycleView 滑动到底部,加载更多
android.support.v7 包提供了一个新的组件:RecycleView,用以提供一个灵活的列表试图.显示大型数据集,它支持局部刷新.显示动画等功能,可以用来取代ListView与GridV ...
- Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多
http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...
- 关于H5判定区域里面滑动到底部,加载更多的总结
1.如何判定H5中滑动到底部,然后加载更多的功能实现. 思路:我们需要设定一个固定高度的盒子,然后我们利用scroll来监听滚动,当scrollTop(滚动的距离) + clientHeight(页面 ...
- js如何实现上拉加载更多...
我们在项目中经常使用到下拉加载更多,之前要么是底部写加载按钮,要么是引入插件.今天终于有时间手写一个了,之前感觉挺麻烦,明白原理后,其实很简单... scrollTop:滚动视窗的高度距离window ...
随机推荐
- CCSUOJ评测系统——第四次scrum冲刺
1.小组成员 舒 溢 许嘉荣 唐 浩 黄欣欣 廖帅元 刘洋江 薛思汝 2.最终成果及其代码仓库链接 CCSU评测系统 代码仓库 3.评测系统功能 用户注册 用户可选题目进行提交 用户做题结果 排名功能 ...
- 11 tensorflow在tf.while_loop循环(非一般循环)中使用操纵变量该怎么做
代码(操纵全局变量) xiaojie=1 i=tf.constant(0,dtype=tf.int32) batch_len=tf.constant(10,dtype=tf.int32) loop_c ...
- shell_basic
1.回顾基础命令 2.脚本 3.变量 4.别名 5.条件判断 6.test判断 一.回顾基础命令 shutdown --关机/重启 exit --退出当前shell rmdir --删除空目录 d ...
- 如何在 OS X 中安装 ruby
如何在 OS X 中安装 ruby 软件包下载 链接: http://pan.baidu.com/s/1mgMil5I 密码: tiqg 安装 http://brew.sh/ 1. 先安装 brew( ...
- Linux系统锁定关键文件
锁定系统关键文件 1.密码.账号文件 chattr +i /etc/passwd /etc/group /etc/shadow /etc/gshadow /etc/inittab 加锁:chattr ...
- 批处理文件(Batch Files )
后缀是bat的文件就是批处理文件,是一种文本文件.简单的说,它的作用就是自动的连续执行多条命令,批处理文件的内容就是一条一条的命令. 新建一个批处理abc.bat,里面内容如下:@echo offec ...
- php数据结构之二叉树
树是一种比较重要的数据结构, 尤其是二叉树.二叉树是一种特殊的树,在二叉树中每个节点最多有两个子节点,一般称为左子节点和右子节点(或左孩子和右孩子),并且二叉树的子树有左右之 分,其次序不能任意颠倒. ...
- November 16th 2016 Week 47th Wednesday
Success is falling nine times and getting up ten. 成功就是哪怕跌倒九次,也要在第十次爬起来. For most of us, we may choos ...
- 第二次作业--APP案例分析
网易云音乐APP分析 第一部分 调研, 评测 1.APP打开界面简洁,一进入APP便能看到APP推荐的歌单,再使用的时候可以更多的了解新的歌曲 2.APP顶部分为三个板块为音乐管理.音乐推荐(音乐推荐 ...
- Hadoop学习之路(七)Hadoop集群shell常用命令
Hadoop常用命令 启动HDFS集群 [hadoop@hadoop1 ~]$ start-dfs.sh Starting namenodes on [hadoop1] hadoop1: starti ...