Question

在HTML页面中，我试图使用CSS transform scale属性来实现缩放功能。在HTML页面中，我有更多的div元素，所有元素都使用绝对位置技术放置。然后，将scale属性应用于每个div，我可以看到像zoom一样的效果，但是所有div位置彼此折叠。因此，在应用缩放后如何避免崩溃并保持彼此之间的间隙。

请建议我如何停止重叠以及如何根据scale属性计算每个元素的左和顶部位置。

var zoomScale = 1;

$(document).ready(function(){
  
  $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
    $(".zoomable").each(function(index){
      var left = $(this).position().left;
      var top = $(this).position().top;
      var newLeft = left*zoomScale +"px";
      var newTop = top*zoomScale +"px";
      $(this).css('transform',' scale('+zoomScale+','+zoomScale+')')
    });
  }

  function dispStatus(){
    $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }
  
  dispStatus();
  
});

#container{
     width:500px;
     height:500px;
     border:1px solid red;
     position:relative;
     overflow:auto;
}
.zoomable{
  background-color:lightblue;       
  border:1px solid red;
  width:100px;
  height:100px;
  position:absolute;
  transform-origin: top left;      
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>
<div id="displayStatus"></div>
<br/><br/>
<div id="container">
   <div class="zoomable">First Div</div>
   <div class="zoomable" style="left:105px">Second Div</div>
</div>

JSFiddle Link

Answer 1

您可以将.zoomable div添加到另一个父级（称为.inner-container）中，并为其添加缩放功能。这样.container的div将不会被缩放，而可缩放的div将保持位置。

请参见下面的代码段

var zoomScale = 1;
$(document).ready(function(){
	 $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
      $(".inner-container").css('transform',' scale('+zoomScale+','+zoomScale+')');
  }

 
  function dispStatus(){
   $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }

  dispStatus();

});

    
    .zoomable{
      background-color:lightblue;       
      width:100px;
      height:100px;
      position:absolute;
      border:1px solid red;
    }
    #container{
    width:500px;
    height:500px;
    border:1px solid red;
    position:relative;
    overflow:auto;
    }
    .inner-container{
      transform-origin: top left; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>

<div id="displayStatus"></div>
<br/><br/>

<div id="container">
  <div class="inner-container">
    <div class="zoomable">First Div
    </div>
    <div class="zoomable" style="left:105px">Second Div
    </div>
  </div>
</div>
<br/><br/>

您也可以here对其进行测试

CSS缩放和转换导致重叠

1 个答案: