javascript 翻页测试页(动态创建标签并自动翻页)
翻页测试页
$(id).scrollHeight - $(id).offsetHeight) {
moveto = $(id).scrollHeight - $(id).offsetHeight;
}
if(Math.abs($(id).scrollTop - moveto) $(id).scrollHeight - $(id).offsetHeight) {
moveto = $(id).scrollHeight - $(id).offsetHeight;
}
scrollTo(id,moveto);
}
var updateInfo = function(moveto,isMove) {
$("info").innerHTML = "当前位置 : " + $("div").scrollTop;
$("info").innerHTML += " 此次翻页到达位置 : " + moveto + " 翻页状态 : " + (isMove ? "翻页中..." : "已完成");
$("info").innerHTML += "
翻页层的相关属性 : scrollHeight(总高度):" + $("div").scrollHeight + " offsetHeight(可见域高度):" + $("div").offsetHeight + " scrollTop(当前翻页高度):" + $("div").scrollTop;
}
setInterval("scroll('div')",5000)
//-->
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
js实现翻页后保持checkbox选中状态的实现方法
项目中的分页使用真分页,每次点击上下页按钮后,再次调用后台方法查询,重新刷新此页面.所以checkbox为false. 比如酷狗音乐中,上下页选中的歌曲不会保留,只能在每页中选择添加后,再切换下页. 但是项目中有着需求,所以只能完成实现. 项目具体的需求如下:给角色授权时,选择模块以及模块下的操作,点击上下页后选中的checkbox不变. 界面如下: 实现的思路如下: 在界面中,使用纯js完成.把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到ac
-
jsp 使用jstl实现翻页实例代码
使用jstl进行显示相对使用jsp来说代码更显得整齐,也使代码量显得较少 复制代码 代码如下: <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core"
-
Javascript表格翻页效果实现思路及代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover
-
JavaScript 拖拽翻页效果代码
拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40
-
Javascript表格翻页效果的具体实现
表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {
-
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件
-
JavaScript实现翻页功能(附效果图)
效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值. query是查询的方法名称. 10是总页数 1是当前页数 100是总条数. <%@ page language="java" contentType="text/html;charset=UTF-8" pageEn
-
react.js 翻页插件实例代码
废话不多说了,下面给大家分享react.js翻页插件的代码,具体代码如下所示: var Page = React.createClass({ render:function() { //中间代码更新 var totalRows = this.props.totalRows; var listRows = this.props.listRows; var nowPage = this.props.nowPage>0?this.props.nowPage:1; var firstRow = this
-
移动端翻页插件dropload.js(支持Zepto和jQuery)
dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能.(比较类似美团美食的界面) 一.解决方案 改进1:由于有分页,搜索,排序,多条件筛选功能,可能都不需要上拉,进到页面就没有数据. 例如:搜索一个服务端不存在的名字. 所以,添加接口设置setHasData. MyDropLoad.prototype.setHasData = function(i
-
按键盘方向键翻页跳转的javascript代码(支持ie,firefox)
网上提供的代码,多是仅支持ie,下面这个是我们特别为大家整理的兼容firefox版本的. 支持按键盘方向键翻页跳转的代码支持ie,firefox document.onkeydown = pageEvent; var prevpage="http://www.jb51.net/softs"; var nextpage="http://www.jb51.net/codes"; function pageEvent(evt){ evt = evt ||window.ev
-
Js实现网页键盘控制翻页的方法
本文实例讲述了Js实现网页键盘控制翻页的方法.分享给大家供大家参考.具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现. 举例如下: 复制代码 代码如下: <a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" hre
随机推荐
- vue.js移动端app之上拉加载以及下拉刷新实战
- Flex控制弹出窗口拖动范围示例代码
- Java依赖-关联-聚合-组合之间区别_动力节点Java学院整理
- 为javascript添加String.Format方法
- PHPCMS忘记后台密码的解决办法
- 通过实例分析MySQL中的四种事务隔离级别
- 深入sql数据连接时的一些问题分析
- 优化php效率,提高php性能的一些方法
- 利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页
- 浅谈Node.js ORM框架Sequlize之表间关系
- 验证javascript中Object和Function的关系的三段简单代码
- SQL 提权 常用命令
- 基于jQuery 实现bootstrapValidator下的全局验证
- Bootstrap的图片轮播示例代码
- 主流操作系统平台的宏定义
- Java线程池的几种实现方法和区别介绍
- android实现扫描网页二维码进行网页登录功能
- vue element动态渲染、移除表单并添加验证的实现
- laravel框架语言包拓展实现方法分析
- Golang执行go get私有库提示"410 Gone" 的问题及解决办法