jQuery scale div內容（嵌套div）

我怎樣才能得到藍色方框與紅色比例？（使用jQuery UI的）jQuery scale div內容（嵌套div）

這是基本的代碼，CSS：

#outer { 
    position:relative; 
    height:100px; 
    width:150px; 
    z-index:1; 
    background:#F00; 
} 
#nested { 
    position:absolute; 
    left:50px; top:20px; 
    width:50px; height:20px; 
    z-index:2; 
    background:#00F; 
    cursor:pointer; 
}

和HTML：

<div id="outer"> 
<div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" /> 
</div>

來源

2012-02-09 julifos

即時通訊不知道你的意思是規模都......我想你想要的位置也改變呢？ – ManseUK 2012-02-09 10:41:47

我意識到這是舊的，但如果我正確理解你，我試圖達到同樣的目的，並遇到這個工作的jQuery插件：

https://github.com/heygrady/transform/wiki

來源

2012-05-18 17:30:07 james

這絕對是我最喜歡的答案;-)使用百分比設計對我來說似乎不是一個好主意，因爲我需要應該定位的東西，我不能花時間計算42.748％這樣的東西。這個變換的東西可以完成所有工作，因爲您可以在設計應用程序（連續）中對事物進行縮放。太好了！ – julifos 2012-07-05 18:44:33

的jQuery：

$('#outer, #nested').effect('scale', {scale:'content',percent:50}, 1000);

如果你也想要t Ø重新嵌套的藍盒子，不使用固定的像素定位在CSS ...用％

來源

2012-02-09 10:40:13 ggzone

.effect（）使用jquery-ui，而不僅僅是jquery（正如本答案的第一行所述）。只是想給大家一個頭= = – Losbear 2015-04-30 14:03:12

檢查此琴：http://jsfiddle.net/techfoobar/Y54EB/4/

的解決方案基本上是指定％w.r.t.尺寸和div嵌套的位置父母比像素。

來源

2012-02-09 10:41:43 techfoobar

OMG！這是一個很好的解決方案，但是我在div中有很多不同的元素，這將是一個計算所有百分比的非常好的方法。那麼，jQuery不可能縮放嵌套固定位置元素嗎？ – julifos 2012-02-09 17:12:02

是的，這是可能的。但是，如果您需要嵌套元素作爲父級動畫（即兒童的尺寸和父母的動畫位置）調整爲更小/更大的尺寸，則需要使用基於CSS的解決方案。如果父母完成動畫之後確定孩子的大小，那麼你可以去找一個基於jQuery的解決方案。 – techfoobar 2012-02-09 18:05:16

我希望所有的東西都被同時縮放，儘管它的位置是px或％。事實上，我是一個很長時間的Flash開發者用js + css掙扎我的大腦;-)順便說一句，我現在讓我的元素獨立（而不是父div的子元素）並分別爲每個元素分別設置動畫，這似乎更多一致... – julifos 2012-02-10 11:52:21

改變你的CSS使用百分比來代替：

#nested { 
    position:absolute; 
    left:30%; top:20%; 
    width:50%; height:20%; 
    z-index:2; 
    background:#00F; 
    cursor:pointer; 
}

這樣的#nested DIV總是按比例outer格 - 這裏還保持它的定位

工作實例 - >http://jsfiddle.net/Y54EB/5/

來源

2012-02-09 10:42:46 ManseUK

jQuery scale div內容（嵌套div）

回答

相關問題