Question

我想知道如何在jquery中使用form type range放大和缩小。

我正在尝试放大并缩小div class，但我不知道如何使用jquery进行缩放可以提供帮助。

<input type="text" >

Answer 1

CSS3有一个新的zoom属性，但您可能需要在其上使用供应商前缀，具体取决于您的浏览器。

要增加div的大小，您可以使用正值（> 1）并减少可以使用负值

JavaScript解决方案

＆＃13;

var range = document.getElementById("my-range");
var square = document.getElementById("square");

range.addEventListener("change", function() {
    square.style.zoom = this.value; 
});

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何使用jquery使用表单类型范围放大和缩小

1 个答案: