JavaScript 调整大小

发布于 2024-08-13 05:57:46 字数 704 浏览 7 评论 0原文

我对 javascript 的了解很少，所以这似乎是一个非常基本的问题，但找不到方法来做到这一点。

我有一个 1024*768 的固定区域，如下所示：

alt text http://img260.imageshack .us/img260/4618/myimage.png

在“A部分”的右侧会有一个javascript按钮。当我单击该按钮时，A 部分将自动调整大小，如下所示：

alt text http://img705.imageshack.us/img705/92/myimage1.png

因此，A 部分将与 B 部分重叠，并且它将与 C 部分大小相同（并且我知道部分的大小C）。如何使用重叠功能自动调整该区域的大小？我正在寻找 Jquery 的插件，但找不到。 Jquery中有一个可调整大小的函数，但它对我没有帮助。你能帮我一下吗？（如果你只给我一个与此功能相关的链接，那就足够了）

编辑：额外说明，A 部分是一个 flash 对象，因此当我单击该按钮时，它会放大并与 B 部分重叠。

谢谢，

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满天都是小星星 2024-08-20 05:57:46

jQuery hide() 效果在这里很有用。如果 A 部分和B 部分有一个float: left，当 B 部分隐藏时，A 部分应该展开以填充该区域。

http://docs.jquery.com/Effects/hide

回复收藏 0 原文

-小熊_ 2024-08-20 05:57:46

您尝试过动画功能吗？
http://docs.jquery.com/Effects/animate

可以使用 A 隐藏 B 部分滑动或让 A 部分重叠，就像您提到的那样，只需要正确设置定位、z 索引等。

回复收藏 0 原文

人海汹涌 2024-08-20 05:57:46

像这样的东西：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Terminal</title>
        <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#but').click(function (e) {
                    $('#a').removeClass('big').addClass('normal');
                    $('#b').hide();
                    e.preventDefault();
                });
            });
        </script>
        <style type="text/css">
            .height {
                height: 100px;
                border: 1px solid black;
            }

            .big {
                width: 198px;
                float: left;
            }

            .small {
                width: 100px;
                float: left;
            }

            .normal {
                width: 300px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div><a href="#" id="but">button</a></div>
        <div id="a" class="height big">a</div>
        <div id="b" class="height small">b</div>
        <div class="height normal">c</div>
    </body>
</html>

something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Terminal</title>
        <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#but').click(function (e) {
                    $('#a').removeClass('big').addClass('normal');
                    $('#b').hide();
                    e.preventDefault();
                });
            });
        </script>
        <style type="text/css">
            .height {
                height: 100px;
                border: 1px solid black;
            }

            .big {
                width: 198px;
                float: left;
            }

            .small {
                width: 100px;
                float: left;
            }

            .normal {
                width: 300px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div><a href="#" id="but">button</a></div>
        <div id="a" class="height big">a</div>
        <div id="b" class="height small">b</div>
        <div class="height normal">c</div>
    </body>
</html>

回复收藏 0 原文

~没有更多了~