javascript - 带有溢出 :hidden 的 Div 中带有 Javascript 的可滚动内容

Question

我需要在一个小空间内显示大量图像缩略图。

我的想法是拥有 3 列缩略图，其中行数不确定。我计划将这些内容放在 a 中，然后将其放入视口(viewport) div 中。像这样:

        <div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
            <div id="content" style="width: 300px; height: 100000px;">
                 Rows of thumbnails go here
            </div>
        </div>
        <a href="javascript:ScrollUp()">Previous</a>
        <a href="javascript:ScrollDown()">Next</a>

Autotrader 的图像控制正是我想要的，如果一个例子有助于说明我的观点的话。

我认为我需要做的是在单击其中一个按钮时使用 javascript 在一段时间内更改“内容”的 topMargin 以获得滚动效果。

我不太喜欢使用 javascript，而且我不确定从哪里开始。有人可以指出我正确的方向吗？

Answer 1

所以我终于抽出 30 秒来了解什么是 jQuery 以及如何使用它。

=0

这是一个执行我正在寻找的 Action 的简单示例。

您必须下载 jQuery 才能使其工作。 http://jquery.com/

我会留下这个问题，以防其他人需要这样的东西。

    <script src="../jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#next").toggle(function() {
            $("#content").animate({ marginLeft: '0px'}, 'slow');
            }, function() {
            $("#content").animate({ marginLeft: '-100px' }, 'slow');
            });
        });

    </script>

        <div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
            <div id="content" style="width: 300px; height: 100000px;">
                 Rows of thumbnails go here
            </div>
        </div>
        <a id="next" href="">Previous</a>
        <a id="prev" href="">Next</a>

如果有更好的方法，请告诉我......