JavaScript中实现无限翻页
来源:互联网 发布:电脑怎么截图淘宝客服 编辑:程序博客网 时间:2024/04/29 23:17
我们在平常应用的浏览器中当翻页的时候,还需要拖动滚动条,而今天为大家带来无限翻页技术。
分页导航是一种方法,一种不用Javascript方法。启用了javascript后,就可以不再用任何分页链接,而用无限翻页来代替他们。
Html代码
<span style="font-family:SimSun;font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!-- ! Excerpted from "Pragmatic Guide to JavaScript", ! published by The Pragmatic Bookshelf. ! Copyrights apply to this code. It may not be used to create training material, ! courses, books, articles, and the like. Contact us if you are in doubt. ! We make no guarantees that this code is fit for any purpose. ! Visit http://www.pragmaticprogrammer.com/titles/pg_js for more book information.--><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Implementing an “infinite scroll” - Pocket JavaScript</title> <link rel="stylesheet" type="text/css" href="infinite.css" /> <script type="text/javascript" src="../../prototype.js"></script> <script type="text/javascript" src="infinite.js"></script></head><body><h1>Implementing an “infinite scroll”</h1><div id="posts"><h2>Blog post 1</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h2>Blog post 2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h2>Blog post 3</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h2>Blog post 4</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><h2>Blog post 5</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><p><img src="spinner.gif" id="spinner" style="display: none;" /> </p><p id="footer">© 2009–2010 Christophe Porteneuve. Thanks to Sam Stephenson @ 37signals for inspiration.</p></body></html></span>
Js代码
<span style="font-family:SimSun;font-size:18px;">/*** * Excerpted from "Pragmatic Guide to JavaScript", * published by The Pragmatic Bookshelf. * Copyrights apply to this code. It may not be used to create training material, * courses, books, articles, and the like. Contact us if you are in doubt. * We make no guarantees that this code is fit for any purpose. * Visit http://www.pragmaticprogrammer.com/titles/pg_js for more book information.***/(function() { function lowEnough() { var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; // Trigger for scrolls within 20 pixels from page bottom return pageHeight - viewportHeight - scrollHeight < 20; } function checkScroll() { if (!lowEnough()) return pollScroll(); $('spinner').show(); new Ajax.Updater('posts', 'more.php', { method: 'get', insertion: 'bottom', onComplete: function() { $('spinner').hide(); }, onSuccess: pollScroll }); } function pollScroll() { setTimeout(checkScroll, 100); } pollScroll();})();</span>
总结:
有了翻页技术,可以在做考试系统的时候用的上,这也得根据实际情况来做判断。
0 0
- JavaScript中实现无限翻页
- JavaScript实现翻页功能
- javascript中,使用正则表达式实现'字符串截断翻页'
- Jsp中翻页功能实现
- javascript实现无限级联动
- javascript创建table并实现翻页效果
- javaScript+turn.js实现图书翻页效果
- 在android中实现手势翻页效果
- Android中实现滑动翻页—ViewFlipper
- web中翻页功能的实现
- 用Javascript实现Blogger/Blogspot的传统模板翻页功能
- Javascript表格翻页效果实现思路及代码
- JavaScript菜鸟之翻页链接的的简单实现
- ios 无限循环翻页源码例子
- jQuery插件infinitescroll参数【无限翻页】
- android最简单的ViewPager无限翻页
- ListView中使用线程实现无限加载
- Android中ViewPager无限循环实现方法
- 智能家居之智能产品的表现形式
- 处理内存泄漏c++
- java 后台Post提交
- 数据结构C语言实现——ADT Triplet
- PHP 签名
- JavaScript中实现无限翻页
- Jobdu 题目1450:产生冠军
- hdoj 2046 骨牌铺方格
- MySQL性能优化(二)
- EnterCriticalSection和LeaveCriticalSection函数
- Android 游戏设计教程:游戏元素和工具
- assert.h c++
- dijkstra,bellman-ford,floyd,HDU—1874 畅通工程续
- SQL 触发器