使用变换转换和缩放使用div缩放容器

我想单击使用div缩放容器，只使用css转换和缩放。问题是，它只适用于第一次点击，第二，第三......我的div正在翻译奇怪。对我来说非常重要的是要调整背景。使用变换转换和缩放使用div缩放容器

\t \t 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

来源

2016-07-21 theoractus

你需要的就是改变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。

来源

2016-07-27 15:27:09 opiumind

使用变换转换和缩放使用div缩放容器

回答

相关问题