帶有Javascript的可滾動內容與溢出Div：隱藏

Question

我需要在小空間中顯示大量圖像thumnails。

我的想法是有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爲滾動效果在一段時間內更改'content'的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> 

如果有更好的辦法，讓我知道....