使用Jquery中的百分比

我正在構建一個流體佈局的網站，因此需要在我的jquery大小和動畫中使用百分比。正如我發現的那樣，問題在於Jquery不理解百分比。以下是我之後的示例：使用Jquery中的百分比

頁面<body>是100％寬。

<article>是頁面主體的71％的寬度。

<hgroup>是的<article>

33.2％的寬度我想<article>是相同的寬度<hgroup>在頁面加載（使得僅<hgroup>是示出），然後再次擴展到頁面寬度的71％當點擊<hgroup>時，允許顯示<article>內的其餘內容。同時，我想<article>向左滑動的寬度爲<hgroup>，隱藏<hgroup>。

有什麼辦法可以做出這種計算，還是我不得不求助於像素？

來源

2011-08-06 ajw-art

太多的無奈與悔恨，我終於之後把它整理出來。下面的代碼我想出了其中，奇蹟般地，工作原理：

 $(document).ready(function() { 
      $('section').hide(); 
      //Capture widths on page load 
      var bwidth = $('body').width(); 
      var awidth = $('article').width(); 
      var hgwidth = $('hgroup').width(); 
      $('hgroup').width(hgwidth); 
      $('article').width(hgwidth); 

      $('hgroup').click(function(){ 
      //Hide open article 
      var close = $('section:visible').parent(); 
      $(close).children('section').hide().end().width(hgwidth); 
      $(close).removeClass('active').css('marginLeft', '+=' +hgwidth).detach().appendTo('body'); 

      //Hide last Article 
       $('body article').last().hide(); 

      //Show current 
      $(this).parent().addClass('active') 
       $('.active').animate({ 
          width: awidth, 
          marginLeft: '-=' + hgwidth 
         },500); 
       $(this).next().delay(500).fadeIn(50); 
       $(this).css('box-shadow','0px 0px 8px #666'); 

       //Show Next Hgroup 
       $(this).parent().nextAll('article:first').show(); 

        }); 
     });

來源

2011-08-07 22:07:46

如果你的問題解決了，你應該[接受你自己的答案]（http://meta.stackexchange.com/questions/65363/can-i-answer-my-own-question）。 –

我認爲你正在尋找幻燈片效果。看看jQuery的UI滑動效果http://docs.jquery.com/UI/Effects/Slide。它可以幫助你沒有太多的編碼。

來源

2011-08-06 23:58:35 ShankarSangoli

我要去的效果是多單滑手風琴的，因爲所涉及的三篇文章。我最大的問題是如何告訴我的劇本，我希望事物的大小以百分比爲單位;我會在稍後確定這些影響。 –

好了，你可以定義

article { 
    width: 23.6%; 
    /* that's 33.2% of 71% of 100 */ 
} 

hgroup { 
    width: 100%; 
    /* that's in relation to article */ 
}

加任何定位你需要

然後

$('article').width($('body').width()/100 * 71); 
$('hgroup').width($('article').width()/100 * 33.2);

加任何效果，你需要

來源

2011-08-07 00:51:05 Zhenya

我希望文章/ hgroups是適當的大小，以防某些人因爲某種原因沒有使用JavaScript查看;這樣，內容不會消失。我最終捕獲了doc準備好的寬度值並將它們存儲爲我可以在整個腳本中使用的變量。謝謝，雖然;如果我不需要文章回退到適當的寬度，這將會奏效。 –

然後你可以爲文章設置71％的寬度，在hss中設置33.2％，這將是後備。然後在頁面負載分別設置爲23.6和100通過jquery，然後再次點擊71％和33.2％，正如我上面描述的。 – Zhenya

啊，我看到你已經找到了解決辦法。沒關係。 – Zhenya

使用Jquery中的百分比

回答

相關問題