Как при увеличение сделать придел чтобы больше не увеличился в размере так же обратной помогите пожалуйста

Question

Как при увеличение сделать придел чтобы больше не увеличился в размере так же обратной помогите пожалуйста

Александр Михайлович Ученик (34), открыт 3 дня назад

Например я увеличиваю 5 раз по нажатие кнопки увеличивать а больше не будет увеличиваться уже предел, и обратную сторону уменьшаешь 5 раз нажал но больше по нажатие кнопки не уменьшается предел

html

 <button id="zoom">Увеличить блок</button> 
<button id="minus">Уменьшить блок</button> 
 
<div id="block"></div>

jquery

 $( "#zoom" ).on( "click", function() { 
  $( "#block" ).css({ 
    width: function( index, value ) { 
      return parseFloat( value ) + 100; 
    }, 
    height: function( index, value ) { 
      return parseFloat( value ) + 100; 
    } 
  }); 
}); 
 
$( "#minus" ).on( "click", function() { 
  $( "#block" ).css({ 
    width: function( index, value ) { 
      return parseInt( value ) - 100; 
    }, 
    height: function( index, value ) { 
      return parseInt( value ) - 100; 
    } 
  }); 
});

Answer 1

Чтобы ограничить увеличение и уменьшение размера блока, вам нужно добавить переменные, которые будут отслеживать текущий размер блока и ограничивать его в пределах заданных значений. Вот как вы можете это сделать:

HTML
HTML
<button id="zoom">Увеличить блок</button>
<button id="minus">Уменьшить блок</button>

<div id="block" style="width: 100px; height: 100px; background-color: lightblue;"></div>
jQuery
javascript
$(document).ready(function() {
// Устанавливаем начальные размеры и пределы
var currentWidth = 100;
var currentHeight = 100;
var maxSize = 500; // Максимальный размер
var minSize = 100; // Минимальный размер

// Функция для увеличения блока
$("#zoom").on("click", function() {
if (currentWidth < maxSize) {
currentWidth += 100;
currentHeight += 100;
$("#block").css({
width: currentWidth + "px",
height: currentHeight + "px"
});
} else {
alert("Достигнут максимальный размер!");
}
});

// Функция для уменьшения блока
$("#minus").on("click", function() {
if (currentWidth > minSize) {
currentWidth -= 100;
currentHeight -= 100;
$("#block").css({
width: currentWidth + "px",
height: currentHeight + "px"
});
} else {
alert("Достигнут минимальный размер!");
}
});
});
Объяснение
1. Переменные для отслеживания размера:
currentWidth и currentHeight используются для хранения текущих размеров блока.
maxSize и minSize определяют максимальный и минимальный размеры блока.
2. Увеличение блока:
При нажатии на кнопку «Увеличить блок» проверяется, не превышает ли текущий размер maxSize.
Если нет, то размеры увеличиваются на 100 пикселей.
Если да, выводится сообщение о достижении максимального размера.
3. Уменьшение блока:
При нажатии на кнопку "Уменьшить блок" проверяется, не меньше ли текущий размер minSize.
Если нет, то размеры уменьшаются на 100 пикселей.
Если да, выводится сообщение о достижении минимального размера.
Дополнительные улучшения
Анимация: Вы можете добавить анимацию при изменении размера, используя метод .animate() в jQuery.
Графический интерфейс: Для более плавного изменения размера можно использовать ползунки (sliders) вместо кнопок.
Ограничение пошагового изменения: Если вы хотите изменять размер не на фиксированное значение, а на любое другое, вы можете использовать переменную для шага изменения.
Этот код должен помочь вам ограничить увеличение и уменьшение размера блока в пределах заданных значений.

Answer 2

✔️ НОВОСТИ ДНЯ... Искусственный Интеллект (176386) 14 часов назад

зачем это тут