2009-12-04 177 views
1

我的JavaScript知识很少,所以它似乎是一个非常基本的问题,但无法找到一种方法来做到这一点。Javascript调整大小

我有这样一个1024 * 768的固定区域:

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

会有对“一节”右侧的一个JavaScript按钮。当我点击该按钮,A部分将被自动调整,这将是这样的:

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

因此,A部分将与B部分重叠,这将是相同的大小与C节(和我知道C节的大小)。我怎样才能自动调整重叠功能的区域?我正在为Jquery寻找一个插件,但无法找到它。在Jquery中有一个可调整大小的函数,但它对我没有帮助。你能帮我吗? (如果你只是给我一个与此功能相关的链接,那就足够了)

编辑:需要额外注意的是,A部分是一个flash对象,所以它会放大并与B部分重叠,当我点击到那个按钮。

感谢,

+0

你需要一些CSS知识:) – 2009-12-04 06:51:35

+0

是的,你是对的,我想提高我的客户端编程技巧,但是这是一个JavaScript的问题 – murat 2009-12-04 08:04:42

回答

0

jQuery的hide()影响将是有益的在这里。如果A部分& B部分有float: left A部分应该扩大到B部分隐藏时填充区域。

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

+0

感谢您的回答,是的,这是可能的,但我不想隐藏乙部。 这是很难给我解释的英文,但我想给这个例子: 如果你看看这里:http:///www.scribd.com/doc/23640532/Elisa-Hanukkah-Cards您可以调整Flash对象的大小(右下角),使其与内容重叠。因此,我将拥有相同的功能,并且会有一个按钮,可以以固定大小自动调整对象的大小。我只需要一个可以自动调整大小的按钮。再次感谢 – murat 2009-12-04 05:29:22

+0

对于我所理解的,你想让A部分调整到B部分,就像图层一样,对吧?如果是这样,留下评论,我会给你一个亮点。 – yoda 2009-12-04 05:35:09

+0

是的完全正确.. – murat 2009-12-04 05:41:15

0

您是否尝试过动画功能? http://docs.jquery.com/Effects/animate

可能有B部分隐藏幻灯片或有部分A重叠像你刚才提到的只需要设置定位,Z指数等正确。

+0

嗯,非常感谢这个,我会尝试。 – murat 2009-12-04 05:32:41

+0

你需要多一点。 – yoda 2009-12-04 05:35:48

0

是这样的:

<!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>