Question

我需要在很小的空间内显示很多图像。

我的想法是有3列缩略图，行数不确定。我计划将此内容放入a中，然后将其放在viewport 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>

如果有更好的方法，请告诉我......

可滚动内容使用带有溢出的Div中的Javascript：隐藏

1 个答案: