06.11.2011, 22:16
|
Аспирант
|
|
Регистрация: 23.06.2011
Сообщений: 63
|
|
плавное изменение размеров div
всем привет! подскажите как плавно изменять размеры div при наведении на него мышкой? я в js олень полный......
|
|
06.11.2011, 22:33
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript.
Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.
На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://htmlbook.ru
Задавайте конкретные вопросы по ходу дела.
|
|
06.11.2011, 22:55
|
Интересующийся
|
|
Регистрация: 05.11.2011
Сообщений: 15
|
|
незачем привлекать js, это дело для css3. Гуглите :hover и css3 transition.
|
|
06.11.2011, 23:04
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
Сообщение от griffonn
|
незачем привлекать js, это дело для css3. Гуглите :hover и css3 transition.
|
Ага, ага... Только кроссбраузерность хромает. Немножко)
|
|
06.11.2011, 23:51
|
Интересующийся
|
|
Регистрация: 05.11.2011
Сообщений: 15
|
|
modernizr will make the world simpler (but slower )
|
|
07.11.2011, 00:12
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
Нет, мне очень нравится css3, но, мне кажется, изменение размеров блока - не та вещь, которую можно решать с помощью него. Так как если размер, скажем, почти нулевой - то пользователи ie (10-й поддерживает, не?) так и не узнают, что же в нём...
|
|
07.11.2011, 10:07
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
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, 07.11.2011 в 10:09.
|
|
07.11.2011, 12:58
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
melky, поправь. Меня терзают смутные подозрения, что не -mz-transition, а -moz-transition. И эти подозрения подкрепляются тем, что в ff 7 у меня ничего не работает)
|
|
07.11.2011, 13:16
|
Интересующийся
|
|
Регистрация: 05.11.2011
Сообщений: 15
|
|
-moz- конечно. А еще - зачем трансформации, когда есть старые добрые width/height, имхо понятнее как изменится див.
|
|
07.11.2011, 13:28
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
Да ладно тебе. Как нравится, так и делает. Кто мешает сделать по-своему?)
|
|
|
|