Suren97 Ответов: 2

Javascript: как увеличить и уменьшить изображение после нажатия на него

У меня ширина изображения=200, высота=200. Мне нужно после каждого клика по изображению, чтобы изображение увеличивалось с 50px, и когда оно станет 500px, оно должно уменьшаться с 50px, а когда оно станет 200px, снова оно должно увеличиваться с 50px и так далее.
Как я могу это сделать?

Что я уже пробовал:

Я пытался сделать это, но это неправильно.

function Increase_Decrease() {
    var w = document.getElementById("img").width;
    var h = document.getElementById("img").height;
    if (w <= 500 && h <= 500) {
        var w = document.getElementById("img").width += 50;
        var h = document.getElementById("img").height += 50;
    } else {
        var w = document.getElementById("img").width -= 50;
        var h = document.getElementById("img").height -= 50;
    }
}

2 Ответов

Рейтинг:
1

Mohibur Rashid

улучшенный вариант

<pre>var increasing=1;
var min_width=200;
var change=50;
var max_lenght=500;
function Increase_Decrease() {

	document.getElementById("img").width += change*increasing;
	document.getElementById("img").height += change*increasing;
	if(document.getElementById("img").width >= max_lenght) {
		increasing=-1;
	} else if(document.getElementById("img").width <= min_width) {
		increasing=1;
	}
}

Рейтинг:
1

jsc42

То, что ваш код будет сделать, это изменить размер 200 -&ГТ; 250 -&ГТ; 300 -&ГТ; 350 -&ГТ; 400 -&ГТ; 450 -&ГТ; 500 -&ГТ; 450, как предполагалось, но после этого, по размерам меньше, чем 500, поэтому будет увеличиваться снова. Он будет колебаться 500 -> 450 -> 500 -> 450 -> 500 -> 450 и т. д.
Вы должны помнить, находитесь ли вы в восходящей или нисходящей фазе. Самый простой способ (другие люди могут не согласиться) - это добавить атрибут к тегу изображения. например 

function Increase_Decrease() {
    var img = document.getElementById("img");
    var w = img.width;
    var h = img.height;

    if (w <= 200 && h <= 200) {
       img.changeSize = 50;   // At bottom of range. So must now go up
    } else if (w >= 500 && h >= 500) {
       img.changeSize = -50;    // At top of range. So must now go down again
    }

    img.width += 1 * img.changeSize;   // Attributes are strings. Multiply by 1 is one of several ways to quickly convert it to a number
    img.height += 1 * img.changeSize;
}


Это все из-за моей головы. Это совершенно непроверено.