Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавное увеличение картинки во все стороны из центра (https://javascript.ru/forum/misc/78339-plavnoe-uvelichenie-kartinki-vo-vse-storony-iz-centra.html)

Saitama 30.08.2019 07:42

Плавное увеличение картинки во все стороны из центра
 
Здравствуйте, друзья.
Помогите решить вопрос.

Есть картинка 1.jpg

Как скриптом javascript - увеличить эту картинку из центра - во все стороны, медленно и плавно ( с сохранением пропорций) , до тех пор пока она не увеличится до 300% ?

(А затем произвести остановку.)

ksa 30.08.2019 08:12

Цитата:

Сообщение от Saitama
javascript - увеличить эту картинку из центра - во все стороны

https://myrusakov.ru/uvelichenie-kartinki-klik.html
Цитата:

Сообщение от Saitama
медленно и плавно

Для этого есть варианты в ЦСС
http://shpargalkablog.ru/2011/05/kak...nie.html#close
или setTimeout()...

Aetae 30.08.2019 08:12

<style>
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}
.img {
  cursor: pointer;
  transition: transform 3s;
}
.scale {
  transform: scale(3);
}
</style>
<img class="img" src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" onclick="classList.toggle('scale')">

Saitama 30.08.2019 20:02

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

рони 30.08.2019 20:18

Saitama,
onload вместо onclick

Saitama 30.08.2019 21:03

Теперь все нормально, спасибо за ответы.


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