2009-12-04 93 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>