Главная » Создание сайтов » Верстка » Путешествие объектов в пространстве

Путешествие объектов в пространстве

Путешествие объектов в пространствеКогда верстаешь меню, эта техника используется каждым. Компановка блоков с перемещением, прыгающие квадратики, кружочки и т. п., все требует хорошо отточеной техники. Техники перемещения объектов на странице.

Сегодня мы расберем возможные варианты перемещения блоков. Но для начала пример:

Когда верстаешь выпадающее меню, большинство из вас используют технику при помощи css. Чтобы понять как это устроено, вам поможет следующий пример:
moveobjectCSS

Слева пример, когда курсор не наведен. Справа — наведен. Заметьте, что в левом случае, мы используем left со очень большим значением, и как правило со знаком «-». И получается блок за пределами экрана. А когда наводим курсор на ссылку, появляется выпадающее меню. Появляется — это значит left со значением «0».

Такой вариант будет действовать только с css, когда используе jQuery, то бдет совсем по другому. Мы плавно будем проявлять высоту. Об этом я писал ранее.

Теперь мы рассмотрим пример перемещения блоков при помощи jQuery. Изначально представим в голове что происходит с кодом. И так:
Имеется блок с параметрами: position:absolute, и каким-то положением (left, top, bottom, right) либо без этого. Теперь мы должны узнать, будем мы использовать существующее положение, либо нет. Когда есть заданное положение или мы просто его учитываем (оно не прописано в css, но оно ведь есть), мы прибавляем к существующему значению, еще одно значение, либо вычитаем. Пример:

$("#block").animate({left:'+=240px'}, 500);

К существующему положени по горизонтали от левого края, мы прибавляем значение 240. Значит если у нас было left равное 300px, то станет 540px.

$("#block").animate({left:'-=240px'}, 500);

От существующего положения по горизонтали от левого края, мы отнимаем значение 240. Значит если у нас было left равное 300px, то станет 100px.

Посмотрите эти два варианта на примере:

В принципе мы пришли к завершению... Только стоит отметить, что когда мы делаем другие ориентировки положения (top, right, bottom), то используется такая техника. Только left заменяем на свой ориентир. Пример:

$("#block").animate({top:'+=240px'}, 500);
$("#block").animate({right:'+=240px'}, 500);
$("#block").animate({bottom:'+=240px'}, 500);

Когда нужно не прибавление, к существующему значению, а вычитание, то мы заменяем «+» на «-».

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

$("#block").animate({bottom:'240px'}, 500);

Как видите, мы просто убрали «+=», а оставили только значение.
Однако при повторном вызове функции оно не будет изеняться, а останется таким же. Пример:

Мы рассмотрели возможные варианты перемещения блоков. Причем как при помощи css, так и расширенной анимации на jQuery. Надеюсь я вас никак не запутал, если что, комментарии умесны.

[Изменения 17 октября 2009]
Вы уж извините меня, но я забыл про такую важную вещь. Где же можно использоваться выше приведенные примеры.

Начнем с простого и важного. Выпадающее css меню.
Продолжем мы с примеров чуть по сложнее. При помощи jQuery. Что сразу могу вам показать, так это слайд-панель, сделана она такой техникой. С уважением, Vasilenko Ivan!

Комментарии — 7 комментариев

  1. #7173 ^) в 10:44, 16 октября 2009:

    Ответить | Цитировать

    очень интересно,только я ещё не придумал куда это можно использовать(

  2. #7241 WebMast в 8:37, 17 октября 2009:

    Ответить | Цитировать

    Спасибо, а я уже и забыл про это. Вот, посмотри:

    #edit17-10-09

  3. #7485 Моё имя? Не понятна... в 20:59, 24 октября 2009: (подписался)

    Ответить | Цитировать

    Я поняла, нужно много читать. Каждую тему можно прочесть. Может тогда станет понятно... Пусть не все... Но станет же??? Хотя нет, вы же, наверно, не один год учились?

  4. #7501 WebMast в 11:22, 25 октября 2009:

    Ответить | Цитировать

    Я например jQuery изучаю меньше года. Но усердно...

  5. #7515 Andrey в 23:34, 25 октября 2009:

    Ответить | Цитировать

    jQuery сложная штука,но просто нужно почитать и изучить,спасибо

  6. #12483 андрей в 15:41, 24 июля 2011: (подписался)

    Ответить | Цитировать

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

    скажите как сделать перемещение ссылки по при наведении курсора мыши. На jQuery.

    Эксперементировал с кодом из этого урока — получилось переместить блок наведением курсора. А как осуществить перемещение ссылки?

  7. #12485 андрей в 17:08, 24 июля 2011: (подписался)

    Ответить | Цитировать

    вот код

    $(function (){

    var position = $(«.object»).position ();

    $(«.to .go a»).mouseover (function (){

    $(this).parents («.to»).children («.go a»).animate ({left:'+=240px'}, 500);

    return false;

    });

    $(«.to .go a»).mouseout (function (){

    $(this).parents («.to»).children («.go a»).animate ({left:position.left}, 500);

    return false;

    });

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting