今日の人気記事

まだデータがありません。

無限にスクロールができる「endless-scroll」

当ページのリンクには広告が含まれています。

スポンサーリンク

無限にスクロールができるjQueryプラグイン「endless-scroll」を紹介します。

jQueryプラグイン「endless-scroll」

どこまでも……限りなく……降り積もるスクロール! を実現してくれるプラグインです。

スポンサーリンク

デモを上下にスクロールしてみてください。

「endless-scroll」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Endless Scroll Demo - jQueryプラグインまとめのカルマ</title>
<style type="text/css" media="screen">
  li { padding: 0; list-style: none; }
  #images { padding: 0; }
  .endless_scroll_loader { position: fixed; top: 10px; right: 20px; }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
  var images = $("ul#images").clone().find("li");
  $(window).endlessScroll({
    fireOnce: false,
    fireDelay: false,
    content: function(i, p, d) {
      console.log(i, p, d)
      return images.eq(Math.floor(Math.random()*8))[0].outerHTML;
    }
  });
});
</script>
</head>
<body>
  <h1>Endless Scrollのデモでーす。</h1>
  <p>スクロールしてください!</p>
    <ul id="images">
      <li><img src="img/01.jpg" width="580" /></li>
      <li><img src="img/02.jpg" width="580" /></li>
      <li><img src="img/03.jpg" width="580" /></li>
      <li><img src="img/04.jpg" width="580" /></li>
      <li><img src="img/05.jpg" width="580" /></li>
    </ul>
</body>
</html>

その他オプションや詳細はこちらからどうぞ。
» jquery-endless-scroll

スポンサーリンク

関連記事(一部広告含む)