2016-06-20 5 views
0

Я хотел бы знать, как увеличить и уменьшить масштаб с помощью в jquery.Как увеличить масштаб и уменьшить масштаб с помощью формы типа диапазона с помощью jquery

Я пытаюсь увеличить или уменьшить масштаб div class, но я не знаю, как масштабировать, используя jquery, может ли кто-нибудь помочь.

<input type="text" > 
+0

Просьба уточнить ваш вопрос. Покажите нам свой код html/jQuery, и что нам объяснить, что вы хотите достичь, что вы пробовали до сих пор. – vaso123

+0

Знаете ли вы, что документ Microsoft Word, чтобы увеличить страницу на плюс и минус, я хочу, чтобы это было для html-страницы. – msm

+2

Прочтите это: http://stackoverflow.com/help/how-to-ask Stackoverflow не является бесплатной услугой кодирования. – vaso123

ответ

0

CSS3 имеет новый zoom свойство, но вам может понадобиться использовать префиксы на него в зависимости от вашего браузера.

Чтобы увеличить размер DIV, вы можете использовать положительные значения (> 1), а также для уменьшения вы можете использовать отрицательные значения

JQuery Решение

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>

JavaScript-решение

$("#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

Смежные вопросы