Jump to content
  • 0

плавное изменение размера изображения


cyklop77
 Share

Question

помогите пожалуйста создать эффект при наведении как на этойстранице в блоке .item

здесья примитивно повторил нужную часть кода, но эффект реализовать не могу. в моём случае при наведении всплывающее изображение только плавно меняет прозрачность, а нужно чтобы изменялся размер - от меньшего к большему(от изменения прозрачности можно даже отказаться)

всплывающее изображение должно остаться именно такое, какое сеичас в моей версии - попугайское кольцо

пробовал разобраться как организован эффект на указанном сайте, но не получается. к тому же там немного другой случай - не картинка, а border

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Поговнокодив решил задачу "плавное изменение размера изображения" вот так : http://jsfiddle.net/wrJtJ/1/ . Реализация не лучшая..

тут даже говнокодить не стоило так утончённо. всё то же самое делается при помощи двух строчек с animate()

НО мне нужно сделать так, чтобы увеличивающееся изображение всегда было центрировано по вертикали и по горизонтали. в этом главная проблема

Edited by cyklop77
Link to comment
Share on other sites

  • 0

вариант без js:

_http://jsfiddle.net/webviper/PWLsv/4/ (update)

П.С. Transform есть смысл оставлять только для webkit - в других тормозит) Для адекватной работы(без анимации) в IE нужно немного изменить размеры.

А вообще, интересная задачка, поэкспериментировал...)

Edited by Viper
  • Like 2
Link to comment
Share on other sites

  • 0
НО мне нужно сделать так, чтобы увеличивающееся изображение всегда было центрировано по вертикали и по горизонтали. в этом главная проблема

http://jsfiddle.net/wrJtJ/6/ - лишний элемент обертка и говнокод собственного про-ва(но когда-нибудь я научусь писать красивые скрипты)Ie не может искать элементы по классу, но можно получать весь список элементов и проверять какие из них имеют класс wrapperImg. Получив массив элементов с классом wrapperImg им всем довольно просто можно присвоить мои обработчики событий...

animate()

Я не пользуюсь фреймворками. Или это не фм? :blush:

изменил 'искать элементы по тегу' на 'искать элементы по классу'

Edited by moron
  • Like 1
Link to comment
Share on other sites

  • 0

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

Это тень(box-shadow) от блока, а не от изображения, если я правильно тебя понял) Эт я так "игрался", эксперементировал :blush:

Немного переделал(убрал тень и увеличил размеры круга):

_http://jsfiddle.net/webviper/PWLsv/6/

Edited by Viper
Link to comment
Share on other sites

  • 0

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

Это тень(box-shadow) от блока, а не от изображения, если я правильно тебя понял) Эт я так "игрался", эксперементировал :blush:

Немного переделал(убрал тень и увеличил размеры круга):

_http://jsfiddle.net/webviper/PWLsv/6/

блин прикольно. даже не подумал бы, что такое без js можно сделать

Link to comment
Share on other sites

  • 0

Тоже предлагаю свой вариант, в моем варианте используется жесткие данные для margin-top , margin-left , думаю можно их расчитать вычислив width() и height() изображения. B)

http://jsfiddle.net/5f4pk/1/

UPD: http://jsfiddle.net/5f4pk/3/ (добавила .stop() чтоб остановить предыдущие события)

А вообще, интересная задачка, поэкспериментировал...)

+

для меня в оригинальном варианте, не было понятно- почему маргин и паддинг увеличивается/уменьшается без дергания самого блока. Оказывается, у родителя дисплей выставлен инлайн.

До конца не могу понять поведение блоков между собой и внутри блока с таким представлением? Можете обяснить?

блин прикольно. даже не подумал бы, что такое без js можно сделать

+

Edited by amelice
  • Like 1
Link to comment
Share on other sites

  • 0

amelice, по вашим шарикам если провести мышкой туда-сюда несколько раз они еще продолжают колебаться ))

А вообще, прикольно - раздел "Для начинающих" )

Так, я же поправила. :) А вы обновленный вариант смотрели?

Edited by amelice
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy