無限にスクロールができる「endless-scroll」
当ページのリンクには広告が含まれています。
スポンサーリンク
無限にスクロールができるjQueryプラグイン「endless-scroll」を紹介します。
jQueryプラグイン「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
スポンサーリンク