Изменение одного блока относительно другого div блока при наведении мыши

Тема в разделе "JavaScript", создана пользователем rostisslav, 20 янв 2014.

Модераторы: ZiX
  1. rostisslav

    rostisslav

    Регистр.:
    27 мар 2007
    Сообщения:
    361
    Симпатии:
    136
    есть вопрос. как сделать. пропорциональное изменение блоков допустим на 20px
    Например
     

    Вложения:

    • div.jpg
      div.jpg
      Размер файла:
      29,8 КБ
      Просмотров:
      5
  2. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
    Можно попробовать такой вариант:
    Код:
    $("#div1").hover(function () {
                    $("#div1").addClass("divclass");
                }, function () {
                    $("#div1").removeClass("divclass");
                });
    html
    Код:
    <div id="div1" >
                HTML borders are best created with CSS.
    </div>
    Стиль
    Код:
    <style>
    .divclass{width:200px;height:100px;border:1px solid blue;}
    </style>
    CSS3 решение:
    http://jsfiddle.net/MrdvW/
     
    latteo нравится это.
  3. rostisslav

    rostisslav

    Регистр.:
    27 мар 2007
    Сообщения:
    361
    Симпатии:
    136
    тут проблема в том что Один стиль нужно увеличить,а второй уменьшить, при это сделать это сразу, чтоб не "рвало" дизайн сайта.

    как пример смотрим тут
     
    Последнее редактирование модератором: 20 янв 2014
  4. Sirkukk

    Sirkukk Создатель

    Регистр.:
    29 авг 2012
    Сообщения:
    18
    Симпатии:
    3
    Используйте такое решение на jquery, подвести его под вашу задачу просто:
    Поменяйте прямо на странице http:// jsfiddle . net/c2MDe/, нажмите RUN и смотрите что получится:
    Html
    Код:
    <div id="ID"></div><div id="ID2"></div>
    Скрипт
    Код:
        var speed=500,
            originalWidth=100,
            hoverWidth=150;
    
        $('#ID').hover(function(){
            $(this).stop().animate({width:hoverWidth},speed);
            $('#ID2').stop().animate({width:200-hoverWidth},speed);
        },function(){
            $(this).stop().animate({width:originalWidth},speed);
            $('#ID2').stop().animate({width:originalWidth},speed);
        })
    Стиль
    Код:
    #ID{
        width:100px;
        height:200px;
        border:1px solid #000;
        float:left;
    }
    #ID2{
        width:100px;
        height:200px;
        border:1px solid #000;
        float:left;
    }

    Transition CSS3 лучше не использовать, либо детектить браузер и только для "правильных" делать css3, остальным выдавать js.
     
    rostisslav нравится это.
  5. Prostobv

    Prostobv Создатель

    Регистр.:
    4 дек 2013
    Сообщения:
    20
    Симпатии:
    8
    и как интересно это решение подвести под взаимное изменение двух процентно-изменяемых двух-трех блоков?
     
  6. Sirkukk

    Sirkukk Создатель

    Регистр.:
    29 авг 2012
    Сообщения:
    18
    Симпатии:
    3
    Не совсем понял вопрос:) Для линейной структуры и для нескольких блоков из ID1 ... IDN берем нужный, его увеличиваем на M пикселей (процентов), остальные уменьшаем на M/N пикселей (если блоки одинаковые), или каждый блок уменьшаем на на одинаковый процент его ширины (чтобы сумма "уменьшений" была равна M). Все зависит от того, что должно меняться при увеличении параметров одного блока, параметры только соседнего, двух соседних или вообще всех зависимых блоков.

    А если блоки в "три этажа" и связи вертикальные и горизонтальные, как на сайте Цептер, то нужно что-то другое...
     
  7. rostisslav

    rostisslav

    Регистр.:
    27 мар 2007
    Сообщения:
    361
    Симпатии:
    136
    Спасибо. Разобрался