2

就是这种情况……

HTML：

   <div id="cw">
        <div id="c"></div>        
   </div>
   <a href="#">click me</a>

CSS：

#cw {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px 200px 0 200px;     
    padding: 10px;
}

#c {
    background: blue;
    display: block;
    height: 200px;
    width: 200px;    
}

-> http://jsfiddle.net/F6FF2/4/

现在，我想要实现的就是这个。如果单击“单击我”链接，则内部容器#c应该从它在页面上呈现的位置扩展到窗口的整个范围。

我认为这只能通过分配position: absolute给元素来实现。但后来我遇到了它的父母是相对定位的问题。

所以到目前为止我想出的是克隆#c，将其从 DOM 中删除并将克隆附加到body在动画其扩展之前提供所需的结果。但是，问题是，如果#c包含例如 Google 地图，则必须在克隆事件后重新实例化地图（而不是仅仅刷新图块）。

除了这个解决方案看起来相当混乱之外。必须有更好、更清洁的解决方案。

有任何想法吗？

4

2 回答 2

1

您在此处覆盖内容（地图）：

c.text(c_width+" > "+c_height+" > "+c_left+" > "+c_top);

不要覆盖内容，也不要使用克隆（移动原始），而是在完成动画时触发调整大小事件：

http://jsfiddle.net/F6FF2/10/

于 2012-05-24T10:28:13.193 回答
0

您是否尝试将div 移动到 body 元素而不是克隆它？

$("body").append($("#c"))

完成后，您可以将其移回：

$("#cw").append($("#c"))
于 2012-05-24T10:15:07.793 回答