Прокручиваемый контент с Javascript в Div с переполнением: скрыто

Question

Мне нужно отобразить большое количество изображений в небольшом пространстве.

Моя идея состоит в том, чтобы иметь 3 столбца миниатюр с неопределенным количеством строк. Я планировал поместить этот контент в a, а затем поместить его в 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 - это именно то, к чему я стремлюсь, если пример поможет проиллюстрировать мою точку зрения.

Я думаю, что мне нужно изменить topMargin для контента в течение определенного периода времени с помощью javascript для эффекта прокрутки при нажатии одной из кнопок.

Я не особо связываюсь с 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>

Если есть лучший способ, дайте мне знать ...