使用变换平移和缩放的 div 缩放容器答案

【问题标题】：Zoom container with div using transform translate and scale使用变换平移和缩放的 div 缩放容器
【发布时间】：2016-11-25 03:23:32
【问题描述】：

我想在单击时缩放带有 div 的容器，仅使用 css 转换和缩放。问题是，它只适用于第一次点击、第二次、第三次……我的 div 翻译得很奇怪。对我来说，重要的是缩放背景。

		var scale =0.5;
        var interval = 5;
        var line_weight =1;
     $('document').ready(function(){
            $('#container').click(function(){               

            $('.test').each(function(i){

                var position = $(this).position();
                var positionL=position.left;
                var positionT=position.top;
                
                var positionTscale=positionT*scale;
                var positionLscale=positionL*scale;
                
                var translateX = -(positionL-positionLscale)*(1/scale);
                var translateY = -(positionT-positionTscale) *(1/scale);
                
                $(this).css( 'transform', 'scale('+ scale +')' + ' translate('+ translateX + 'px'+','+ translateY +'px )' ); 
            });
            
           $(".test").css('background', 'repeating-linear-gradient(0deg, #000, #000' + line_weight/scale+ ' #ffffff 0, #ffffff ' + scale*interval+ 'px');
           $(".test").css('border-right', (line_weight) +'px solid');


          });
          
        

        $('#container').dblclick(function(){
                $(".test").css('transform', 'scale(1.0)');
                $(".test").css('background', 'repeating-linear-gradient(0deg, #000, #000' +line_weight+' , #ffffff 0, #ffffff ' + interval + 'px');
                $(".test").css('border-right', line_weight+'px solid');
          });

      }); 

     </script>

body{
                width: 19200px;
                height: 10750px;
            }


             .test{
                height: 200px;
                width: 160px;
                display: inline-block;
                border-right: 1px solid;
                background: repeating-linear-gradient(0deg, #000, #000 1px, #ffffff 0, #ffffff 5px);

             }


             #container{
                width: 340px;
                height: 400px;

             }

             .column{
                display: inline-block;
             }

        <script src="jquery-3.0.0.min.js"></script>
   

        
<body> 

    <div id="container">
            <div>
                <div class="test" >
                    <p class="click">test1</p>
                </div> 
                <div class="test" >
                    <p class="click">test2</p>
                </div>
            </div>

            <div>
                <div class="test">
                    <p class="click">test3</p>
                </div> 
                <div class="test">
                    <p class="click">test4</p>
                </div> 
            </div> 
    </div>
</body>

jsfiiddle上的代码

【问题讨论】：

标签： javascript css css-transforms

【解决方案1】：

您只需更改transform: scale(value) 中的值即可。我为示例添加了两个按钮，供您放大和缩小：

<p class="zoom _bigger">
    zoom++
</p>
<p class="zoom _smaller">
    zoom--
</p>

这里是所有js来解决你的问题：

$('document').ready(function(){
  // We set value as 2, because further we will zoom with a half
  var zoomValue = 2;

  $('.zoom').on('click', function(){               
    if ($(this).hasClass('_bigger')) {
      zoomValue++;
    } else if (zoomValue > 2) {
      zoomValue--;
    } else {
      return false;
    }            
      $('#container').css('transform', 'scale(' + zoomValue * 0.5 + ')');
    });
});

我使用了一半的值进行缩放，你可以玩它并设置你想要的。

您可以查看my example on jsfiddle。

【讨论】：