带有溢出的Div中的Javascript可滚动内容：隐藏答案

【问题标题】：Scrollable Content With Javascript in a Div with overflow:hidden带有溢出的Div中的Javascript可滚动内容：隐藏
【发布时间】：2010-02-25 08:24:22
【问题描述】：

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

我的想法是有 3 列缩略图，其中行数不确定。我打算把这个内容放在一个中，然后把它放在一个视口 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，也不确定从哪里开始。有人能指出我正确的方向吗？

【问题讨论】：

标签： javascript css html

【解决方案1】：

所以我终于抽出 30 秒的时间学习了 jQuery 是什么以及如何使用它。

这是一个做我正在寻找的运动的简单例子。

您必须下载 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>

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

【讨论】：