Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Увеличение изображение до max а потом до min (https://javascript.ru/forum/misc/70335-uvelichenie-izobrazhenie-do-max-potom-do-min.html)

Vardges 28.08.2017 12:24
Увеличение изображение до max а потом до min
 
Добрый день. Учу JS, учитель дал задание.
Существует картинка 200px на 200px(далее min), она увеличивется на 50px при каждом нажатии и так до 500px на 500px(далее max),как только размер картинки достигнет до max она уменьшает на 50px при каждом нажатии до min,и так далее. Вот html код.
<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>

Мучаюсь 3 дня не могу решить. Помогите решить и желательно объясняя каждый шаг.

Dilettante_Pro 28.08.2017 12:41 
<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>
<script>
var elem = document.querySelector('img'),
      sign = 1,
      stepSize = 50,
      minSize = 200,
      maxSize = 500,
      curSize;
elem.onclick = function() {
   curSize = elem.width + stepSize * sign;
   elem.width = curSize;
   elem.height = curSize;
   if(curSize == minSize || curSize == maxSize) sign = -sign;
}
</script>

Комментарии нужны?

Vardges 28.08.2017 13:20
Цитата:
Сообщение от Dilettante_Pro (Сообщение 462918) 
<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>
<script>
var elem = document.querySelector('img'),
      sign = 1,
      stepSize = 50,
      minSize = 200,
      maxSize = 500,
      curSize;
elem.onclick = function() {
   curSize = elem.width + stepSize * sign;
   elem.width = curSize;
   elem.height = curSize;
   if(curSize == minSize || curSize == maxSize) sign = -sign;
}
</script>

Комментарии нужны?
Да был бы благодарен т.к. все команды мне не знакомы. Главное понять какая часть за что отвечает а остальное сам прогуглю

Dilettante_Pro 28.08.2017 13:30
Vardges,
Цитата:
Сообщение от Vardges
все команды мне не знакомы
Все-все не знакомы? Или не все знакомы?
Что конкретно непонятно?

Vardges 28.08.2017 13:42
if(curSize == minSize || curSize == maxSize) sign = -sign;

вот эта часть, разве если "curSize == minSize" не должно быть sing=+sing
а если "curSize == maxSize" sign=-sign?

Dilettante_Pro 28.08.2017 14:44
Vardges,
Если последний вычисленный размер равен минимуму или максимуму, то sign меняет знак.
1 превращается в -1, -1 превращается в 1.

Vardges 28.08.2017 15:31
Цитата:
Сообщение от Dilettante_Pro (Сообщение 462918) 
<img src="https://pbs.twimg.com/profile_images/473506797462896640/_M0JJ0v8.png" width="200" height="200" alt="" id="nkar" onclick='zoom()'>
<script>
var elem = document.querySelector('img'),
      sign = 1,
      stepSize = 50,
      minSize = 200,
      maxSize = 500,
      curSize;
elem.onclick = function() {
   curSize = elem.width + stepSize * sign;
   elem.width = curSize;
   elem.height = curSize;
   if(curSize == minSize || curSize == maxSize) sign = -sign;
}
</script>

Комментарии нужны?
Цитата:
Сообщение от Vardges (Сообщение 462919)
Да был бы благодарен т.к. все команды мне не знакомы. Главное понять какая часть за что отвечает а остальное сам прогуглю
значит во 2ом случии работает принцип --=+?

Dilettante_Pro 28.08.2017 15:58
Цитата:
Сообщение от Vardges
значит во 2ом случии работает принцип --=+?
Естественно. Обыкновенная арифметика.

Vardges 28.08.2017 16:29
Спасибо огромное,вы сильно помогли мне.


Часовой пояс GMT +3, время: 09:48.