Div中具有Javascript的可滾動內容具有溢出：隱藏

Question

我需要在一個很小的空間中顯示很多圖像縮略圖。

我的想法是讓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，也不確定從哪里開始。 有人可以指出我正確的方向嗎？

Answer 1

因此，我終於花了30秒的時間來學習jQuery是什么以及如何使用它。

= 0

這是做我想要的動作的簡單示例。

您必須下載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>

如果有更好的方法，請告訴我...。