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

Question

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

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

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