wie zoomen und verkleinern mit Formulartyp Bereich mit jquery

Question

Ich würde gerne wissen, wie man in jquery mit zoomen und herauszoomen.

Ich versuche zu vergrößern und verkleinern div class, aber ich weiß nicht, wie man mit jquery kann jemand helfen.

<input type="text" > 

Answer 1

CSS3 hat eine neue zoom Eigenschaft, aber Sie können Anbieter Präfixe darauf verwenden müssen, je nach Ihrem Browser.

Um die Größe eines div zu erhöhen, Sie positive Werte können (> 1) und negative Werte verwenden

jQuery Lösung

var range = document.getElementById("my-range"); 
 
var square = document.getElementById("square"); 
 

 
range.addEventListener("change", function() { 
 
    square.style.zoom = this.value; 
 
});

#square { 
 
    margin: 20px; 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<input id="my-range" type="range" step="0.25" min="0.25" max="4" /> 
 

 
<div id="square"></div>

kann zu verringern JavaScript-Lösung

$("#my-range").on("change", function() { 
 
    $("#square").css({"zoom": $(this).val() }); 
 
});

#square { 
 
    margin: 20px; 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="my-range" type="range" step="0.25" min="0.25" max="4" /> 
 

 
<div id="square"></div>

https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom