Question

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

Collections.EMPTY_LIST

Collections.emptyList()

		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>

jsfiiddle上的代码

Answer 1

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

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

以下是解决问题的所有问题：

$('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。

使用变换平移和缩放来使用div缩放容器

1 个答案: