плавное изменение размеров div
всем привет! подскажите как плавно изменять размеры div при наведении на него мышкой? я в js олень полный......
|
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://htmlbook.ru Задавайте конкретные вопросы по ходу дела. |
незачем привлекать js, это дело для css3. Гуглите :hover и css3 transition.
|
Цитата:
|
modernizr will make the world simpler (but slower :) )
|
Нет, мне очень нравится css3, но, мне кажется, изменение размеров блока - не та вещь, которую можно решать с помощью него. Так как если размер, скажем, почти нулевой - то пользователи ie (10-й поддерживает, не?) так и не узнают, что же в нём...
|
transform:scale увеличит\уменьшит элемент в размерах (можно непропорционально изменять размеры)
transition сделает этот переход плавным. это поддерживается в новых браузерах. глупо это НЕ использовать. для браузеров без поддержки этих свойств можно сделать через js <style> div { position : absolute; left : 30%;top: 30%; width : 100px; height : 100px; border : 1px red solid; background-color: yellow; transition : all 1s ease-in-out; -mz-transition : all 1s ease-in-out; -o-transition : all 1s ease-in-out; -webkit-transition : all 1s ease-in-out; } div:hover { transform : scale(2,2); -o-transform : scale(2,2); -mz-transform : scale(2,2); -webkit-transform : scale(2,2); } </style> <div>наведи</div> |
melky, поправь. Меня терзают смутные подозрения, что не -mz-transition, а -moz-transition. И эти подозрения подкрепляются тем, что в ff 7 у меня ничего не работает)
|
-moz- конечно. А еще - зачем трансформации, когда есть старые добрые width/height, имхо понятнее как изменится див.
|
Да ладно тебе. Как нравится, так и делает. Кто мешает сделать по-своему?)
|
Часовой пояс GMT +3, время: 18:22. |