Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   плавное изменение размеров div (https://javascript.ru/forum/dom-window/22949-plavnoe-izmenenie-razmerov-div.html)

dimon76 06.11.2011 22:16

плавное изменение размеров div
 
всем привет! подскажите как плавно изменять размеры div при наведении на него мышкой? я в js олень полный......

trikadin 06.11.2011 22:33

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://htmlbook.ru

Задавайте конкретные вопросы по ходу дела.

griffonn 06.11.2011 22:55

незачем привлекать js, это дело для css3. Гуглите :hover и css3 transition.

trikadin 06.11.2011 23:04

Цитата:

Сообщение от griffonn
незачем привлекать js, это дело для css3. Гуглите :hover и css3 transition.

Ага, ага... Только кроссбраузерность хромает. Немножко)

griffonn 06.11.2011 23:51

modernizr will make the world simpler (but slower :) )

trikadin 07.11.2011 00:12

Нет, мне очень нравится css3, но, мне кажется, изменение размеров блока - не та вещь, которую можно решать с помощью него. Так как если размер, скажем, почти нулевой - то пользователи ie (10-й поддерживает, не?) так и не узнают, что же в нём...

melky 07.11.2011 10:07

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>

trikadin 07.11.2011 12:58

melky, поправь. Меня терзают смутные подозрения, что не -mz-transition, а -moz-transition. И эти подозрения подкрепляются тем, что в ff 7 у меня ничего не работает)

griffonn 07.11.2011 13:16

-moz- конечно. А еще - зачем трансформации, когда есть старые добрые width/height, имхо понятнее как изменится див.

trikadin 07.11.2011 13:28

Да ладно тебе. Как нравится, так и делает. Кто мешает сделать по-своему?)


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