1

「無限」の数のセルを表示するには、5 列 x 2 行のグリッドを作成する必要があります (AJAX で追加されます)。グリッドの両側に [戻る] ボタンと [次へ] ボタンを配置します。オンザフライでコンテンツを追加するので、固定サイズの親 DIV と、固定幅の UL とフローティング LI による非表示のオーバーフローが最適なオプションのように見えました。上マージンを変更して「スクロール」します。ユーザーが上下ではなく左右にスクロールしているように感じてもらいたいです。

うまくいきましたが、これが最善の方法かどうか疑問に思っています。何か案は？

デモ: http://jsfiddle.net/ytJ6Z/

HTML:

<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

CSS:

div {height: 100px; width: 100px; overflow: hidden;}
ul {list-style: none; padding: 0; width: 100px;}
li {height: 50px; width: 50px; float: left; }

Javascript/jQuery:

function scroll(toLeft) {

var oldTop = parseInt($("ul").css("margin-top"));
var newTop;
var left;

if (toLeft) {
    newTop = oldTop - 100;
    left = -100;
}
else {
    newTop = oldTop + 100;
    left = 100;
}

$("ul").animate({
    marginLeft: left,
    opacity: 0
}, 500).animate({
    marginTop: newTop,
    marginLeft: -left
}, 0).animate({
    marginLeft: 0,
    opacity: 1
}, 500);
}
4

0 に答える 0