JavaScript中实现无限翻页

最新推荐文章于 2021-11-23 17:06:40 发布

LuckyFanny520

最新推荐文章于 2021-11-23 17:06:40 发布

阅读量741

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/LuckyFanny520/article/details/38492791

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我们在平常应用的浏览器中当翻页的时候，还需要拖动滚动条，而今天为大家带来无限翻页技术。

分页导航是一种方法，一种不用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>

总结：

有了翻页技术，可以在做考试系统的时候用的上，这也得根据实际情况来做判断。