带有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> 

如果有更好的办法，让我知道....