Zoom-Container mit div mit transform übersetzen und skalieren

Ich möchte einen Container mit divs auf klicken, nur mit css-transform und skalieren. Das Problem ist, dass es nur beim ersten Klick funktioniert, beim zweiten, dritten ... meine Divs übersetzen merkwürdig. Für mich ist es wichtig, den Hintergrund zu skalieren.Zoom-Container mit div mit transform übersetzen und skalieren

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

-Code auf jsfiiddle

Quelle

2016-07-21 theoractus

Was Sie brauchen, ist nur den Wert in transform: scale(value) ändern. Ich habe zwei Tasten für das Beispiel für Sie zum Vergrößern und Verkleinern:

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

Und hier ist alles js Ihr Problem zu lösen:

$('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 + ')'); 
    }); 
});

ich einen halben Wert für das Zoomen verwendet wird, und Sie können damit spielen und festlegen, was Sie wünschen.

Sie können my example on jsfiddle auschecken.

Quelle

2016-07-27 15:27:09 opiumind

Zoom-Container mit div mit transform übersetzen und skalieren

Antwort

Verwandte Themen