如何扩展以使容器也增长并占用空间

时间：2017-09-11 11:46:08

标签： javascript jquery html css css3

所以我有一个容器，我想放大和缩小（放大和缩小），但也有扩展/收缩形式占用空间而不是只是重叠其他东西。

更新

有一个图像，其中有absolute个div放置在坐标中，它们在上下调整时必须保持它们的相对位置（因此我使用比例尺）。

var b = document.getElementById("outer");
var scale = 1;

function increase() {
  scale += 0.1
  b.style.transform = `scale(${scale})`;
}

function decrease() {
  scale -= 0.1
  b.style.transform = `scale(${scale})`;
}
#outer {
  overflow-x: auto position: relative;
  transform-origin: left top;
}

.pointer {
  width: 20px;
  height: 20px;
  background-color: orange;
  position: absolute;
}

#a1 {
  top: 50px;
  left: 150px;
}

#a2 {
  top: 150px;
  left: 50px;
}

#a3 {
  top: 250px;
  left: 550px;
}
<div>
  <button onclick="increase()">Increase</button>
  <button onclick="decrease()">Decrease</button>
</div>
<div id=outer>
  <img src="http://via.placeholder.com/600x350" />
  <div id="a1" class='pointer'>
  </div>
  <div id="a2" class='pointer'>
  </div>
  <div id="a3" class='pointer'>
  </div>
</div>
<div>
  please don't cover me
</div>

宁可没有第三方库（jQuery旁边）也可以考虑。

6 个答案:

答案 0 :(得分：21)

CSS3 scale转换就像那样。不幸的是，缩放将与其他元素重叠，因为它通过创建新的堆叠上下文（基本上将其所有内容放置在相对位置）将容器的内容从流中取出到容器） - 参见相关的文档说明：

  

如果属性的值不是none，则为堆叠上下文   将被创建。

     

来源：MDN

请参阅下面的演示，通过暴力扩展所有元素：

＆＃13;
＆＃13; 
var b, scale = 1, offset, pointers;

window.onload = function() {
  b = document.getElementById("outer");
  offset = b.getBoundingClientRect();
  pointers = Array.prototype.map.call(b.querySelectorAll('.pointer'), function(e) {
    return {
      el: e,
      offset: e.getBoundingClientRect()
    }
  });
}

function increase() {
  scale += 0.1;
  scaleIt();
}

function decrease() {
  scale -= 0.1;
  scaleIt();
}

function scaleIt() {
  b.style.width = scale * offset.width + 'px';
  b.style.height = scale * offset.height + 'px';
  Array.prototype.forEach.call(pointers, function(e) {
    e.el.style.width = scale * e.offset.width + 'px';
    e.el.style.height = scale * e.offset.height + 'px';
    e.el.style.top = scale * e.offset.top + 'px';
    e.el.style.left = scale * e.offset.left + 'px';
  });
}
＆＃13; 
#outer {
  /*overflow-x: auto;*/
  position: relative;
  transform-origin: left top;
}
.pointer {
  width: 20px;
  height: 20px;
  background-color: orange;
  position: absolute;
}
#outer > img {
  height: 100%;
}

#a1 {
  top: 50px;
  left: 150px;
}
#a2 {
  top: 150px;
  left: 50px;
}
#a3 {
  top: 250px;
  left: 550px;
}
＆＃13; 
<div>
    <button onclick="increase()">Increase</button>
    <button onclick="decrease()">Decrease</button>
</div>
<div id=outer>
  <img src="http://via.placeholder.com/600x350" />
  <div id="a1" class='pointer'>
  </div>
  <div id="a2" class='pointer'>
  </div>
  <div id="a3" class='pointer'>
  </div>
</div>
<div>
    please don't cover me
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：6)

我尝试了它的宽度和高度，我认为它会以你想要的方式工作，添加一个小动画，你可以使用它。

var b = document.getElementById("outer");
var b_width = document.getElementById("outer").offsetWidth;
var b_height = document.getElementById("outer").offsetHeight;

function increase()
{
    b_width += 10
    b_height += 10
    b.style.width = b_width+"px";
    b.style.height = b_height+"px";
}

function decrease()
{
    b_width -= 10
    b_height -= 10
    b.style.width = b_width+"px";
    b.style.height = b_height+"px";
}
#outer {
  background-color: red;
  padding: 1em;
  height: 80px;
  width: 80px;
  transform-origin: left top;
}

#inner {
  background-color: yellow;
  height: 50px;
  width: 100%;
}
<div>
    <button onclick="increase()">Increase</button>
    <button onclick="decrease()">Decrease</button>
</div>
<div id=outer>
  <div id=inner>
  </div>
</div>
<div>
    please don't cover me
</div>

答案 2 :(得分：5)

编辑：抱歉冲了过来，我的意思是更新容器

您可以添加容器。存储此容器的初始大小。现在，当您在内部元素中缩放时，将容器的宽度/高度更新为相同的比率。

＆＃13;
＆＃13; 
var a = document.getElementById("outer-wrapper");
var b = document.getElementById("outer");
var scale = 1;
var aWidth = a.offsetWidth;
var aHeight = a.offsetHeight;

function increase()
{
    scale += 0.1
    b.style.transform = `scale(${scale})`;
    a.style.width = `${scale * aWidth}px`;
    a.style.height = `${scale * aHeight}px`;
}

function decrease()
{
    scale -= 0.1
    b.style.transform = `scale(${scale})`;
    a.style.width = `${scale * aWidth}px`;
    a.style.height = `${scale * aHeight}px`;
}
＆＃13; 
#outer {
  position: relative;
  transform-origin: left top;
}

.pointer {
  width: 20px;
  height: 20px;
  background-color: orange;
  position: absolute;
}

#a1 {
  top: 50px;
  left: 150px;
}
#a2 {
  top: 150px;
  left: 50px;
}
#a3 {
  top: 250px;
  left: 550px;
}
＆＃13; 
<div>
    <button onclick="increase()">Increase</button>
    <button onclick="decrease()">Decrease</button>
</div>
<div id="outer-wrapper">
  <div id="outer">
    <img src="http://via.placeholder.com/600x350" />
    <div id="a1" class='pointer'>
    </div>
    <div id="a2" class='pointer'>
    </div>
    <div id="a3" class='pointer'>
    </div>
  </div>
</div>
<div>
    please don't cover me
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：4)

如果您的用例与您的示例一样简单，我认为您可能过于复杂。如果你需要你的子元素来保持它们与父元素的相对位置，你只需要使用相对单位而不是绝对单位来定义它们的位置，并让CSS渲染引擎做它的事情。

在这里，我设置了父级的宽度（而不是缩放比例），让图像自动调整大小以容器来设置其高度，并使用百分比而不是像素。

＆＃13;
＆＃13; 
var b = document.getElementById("outer");
var width = 600;

function increase() {
  width = width * 1.1
  b.style.width = width + 'px';
}

function decrease() {
  width = width / 1.1
  b.style.width = width + 'px';
}
＆＃13; 
#outer {
  position: relative;
}

#outer img {
    width: 100%;
    height: auto;
}

.pointer {
  width: 3.333%;
  height: 5.714%;
  background-color: orange;
  position: absolute;
}

#a1 {
  top: 8.333%;
  left: 14.285%;
}

#a2 {
  top: 42.857%;
  left: 8.333%;
}

#a3 {
  top: 71.428%;
  left: 91.667%;
}
＆＃13; 
<div>
  <button onclick="increase()">Increase</button>
  <button onclick="decrease()">Decrease</button>
</div>
<div id=outer>
  <img src="http://via.placeholder.com/600x350" />
  <div id="a1" class='pointer'>
  </div>
  <div id="a2" class='pointer'>
  </div>
  <div id="a3" class='pointer'>
  </div>
</div>
<div>
  please don't cover me
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：3)

最好的办法是为每个子元素使用动态百分比（%）高度，宽度和位置。

我们只需要根据需要划分所有像素值的宽度或高度，在JS中简单地改变父容器的宽度并观察神奇的发生;）

请找到下面的代码，在值更改的地方添加适当的注释。

var b = document.getElementById("outer");
var scale = 1;

function increase() {
  scale += 0.1
  // Just change the width of parent
  b.style.width = 600 * scale + "px";
}

function decrease() {
  scale -= 0.1
  // Just change the width of parent
  b.style.width = 600 * scale + "px";
}
#outer {
  overflow-x: auto;
  position: relative;
  transform-origin: left top;
  width: 600px; /* Give div static width for children to position correctly */
}

#outer img {
  width: 100%; /* Set image to stretch full width */
}

.pointer {
  width: 3.33%; /* 20px/600px*100% */
  padding-top: 3.33%;/* Don't use static height */
  background-color: orange;
  position: absolute;
}

#a1 {
  top: 14.28%;/* 50px/350px*100% */
  left: 25%;/* 150px/600px*100% */
}

#a2 {
  top: 42.85%;/* 150px/350px*100% */
  left: 8.33%;/* 50px/600px*100% */
}

#a3 {
  top: 71.42%;/* 250px/350px*100% */
  left: 91.66%; /* 550px/600px*100% */
}
<div>
  <button onclick="increase()">Increase</button>
  <button onclick="decrease()">Decrease</button>
</div>
<div id=outer>
  <img src="http://via.placeholder.com/600x350" />
  <div id="a1" class='pointer'>
  </div>
  <div id="a2" class='pointer'>
  </div>
  <div id="a3" class='pointer'>
  </div>
</div>
<div>
  please don't cover me
</div>

P.S。要将标记显示为框，我们将其宽度设置为填充顶部（设置为百分比时相对于父宽度），因此它始终显示为正方形。 ;）

在我看来，这更易于管理，因为您不必处理JS中的每个元素。

答案 5 :(得分：2)

我会使用除缩放之外的其他属性，这与缩放不同会影响流量。您可以更改div的高度，宽度，边距，填充，字体大小等。

编辑：如果你真的想用scale来统一改变元素内部所有东西的大小，你可以有一个外部元素，你可以改变它的宽度和高度，以及一个你可以改变比例的内部元素匹配外部元素的宽度和高度。外部元素将影响内容的流动。但我并不认为这是可取的，因为如果你只是扩大容器内的所有可能的图标和文本，它看起来不会那么好看，你可能想要保留很多内容。无论容器的大小如何，容器的大小都相同。

相关问题
最新问题