Question

如何使用红色框来缩放蓝框？（使用jQuery-UI）

这是基本代码，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>

Answer 1

检查这个小提琴：http://jsfiddle.net/techfoobar/Y54EB/4/

解决方案基本上是在％w.r.t中指定嵌套div的尺寸和位置。父像素而不是像素。

Answer 2

我意识到这已经过时了，但是如果我理解正确的话，那我就试图达到同样的目的，并且遇到了这个jQuery插件来完成这项工作：

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

Answer 3

将CSS更改为使用百分比：

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

这样#nested div总是与outer div成比例 - 也保持其定位

这里的工作示例 - ＆gt; http://jsfiddle.net/Y54EB/5/

Answer 4

jquery的：

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

如果你还需要重新定位嵌套的蓝色框，不要在CSS中使用固定的像素定位...使用％

jQuery scale div内容（嵌套div）

4 个答案: