首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery scale div内容(嵌套div)

jQuery scale div内容(嵌套div)
EN

Stack Overflow用户
提问于 2012-02-09 18:37:16
回答 4查看 22.3K关注 0票数 1

怎样才能让蓝色的框与红色的框缩放?(使用jQuery-UI)

http://jsfiddle.net/Y54EB/1/

这是基本的代码,CSS:

代码语言:javascript
代码运行次数:0
运行
复制
#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:

代码语言:javascript
代码运行次数:0
运行
复制
<div id="outer">
<div id="nested" onclick="$('#outer').effect('scale', {scale:'content',percent:50}, 1000);" />
</div>
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-05-19 01:30:07

我知道这有点老了,但是如果我没理解错的话,我也在尝试实现同样的功能,并且偶然发现了这个jQuery插件:

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

票数 3
EN

Stack Overflow用户

发布于 2012-02-09 18:41:44

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

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

票数 5
EN

Stack Overflow用户

发布于 2012-02-09 18:42:47

将CSS更改为使用百分比:

代码语言:javascript
代码运行次数:0
运行
复制
#nested {
    position:absolute;
    left:30%; top:20%;
    width:50%; height:20%;
    z-index:2;
    background:#00F;
    cursor:pointer;
}

这样,#nested div始终与outer div成比例-也保持其位置不变

此处的工作示例-> http://jsfiddle.net/Y54EB/5/

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9209267

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档