1

我需要创建一个 5 列 x 2 行网格来显示“无限”个单元格（将附加 AJAX）。我将在网格的两侧都有 Back & Next 按钮。因为我将动态添加内容，所以它似乎是一个具有固定大小和隐藏溢出的父 DIV，具有固定宽度和浮动 LI 的 UL 是最佳选择。我会通过更改上边距来“滚动”。我希望用户感觉他们正在向左/向右滚动而不是向上/向下滚动。

我让它工作了，但我想知道这是否是最好的方法。有任何想法吗？

演示：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