Эффект раздвижная дверь с JQuery

Я решил показать вам, как создать эффект раздвижная дверь (развигаться будут от центра четыре угла).

Что делает наш скрипт:

  • Берём все DIV с классом qitem, находим образ слоя и меняем его на четыре DIVs (четыре угла).
  • Каждый угл будет иметь то же фоновое изображение, но с разным положением: вверху слева, вверху справа, внизу слева и внизу справа. Это будет по-прежнему похоже на изначальное все изображение, однако, изображение фактически будет заменено новым DIV и разделено на четыре части.
  • При событии наведении мыши наш блок будет двигать углы по диагонали.
  • Описание блока будет отображаться после того как углы разъедутся.
  • Если пользователь нажал на блок, он будет перемещён по заданной нами ссылке.

На следующем рисунке показано схематически, как это работает:

slice01

1. HTML

Это хорошая практика, чтобы написать HTML код как можно более простым. HTML можно упростить всегда, используя CSS и Javascript. В результате когда мы упростим HTML для одного элемента — мы сможем дублировать его код столько раз, сколько нам потребуется.

 

2. CSS

С CSS тоже всё довольно просто. У нас есть класс с именем qitem. Наш класс qitem должен иметь свойства: скрытый, чтобы скрыть эти четыре угла, плавающим для создания Milti строк и столбцов, иметь курсор в виде руки при наведении, чтобы пользователь понимал что имеет дело с ссылкой.

Для заголовка, позицию прописываем снова абсолютную, а также ставим обязательно Z-index, т.к. наша надпись должна быть многоуровневой в рамках четырех углов.

 

3. Javascript

Итак что делает наш Javascript:

  1. Когда документ будет готов, он вычисляет положение всех углов.
  2. Использование each() в цикле:
    • Захватить все элементы:  путь к изображению.
    • Берём IMG элемент
    • Добавляем четыре угла
    • Устанавливаем фоновое изображение (образ пути берем из IMG элемент) для всех углов
    • Установливаем положение во всех уголках
    • * В связи с совместимостью IE7, вы должны убедиться, что размер изображения / qitem является четным числом, для того чтобы была возможность разделить значение целое число. IE7 может не верно отработать.
  3. На события мыши: указать верные значения для всех углов и анимировать сдвиг углов от qitem.
  4. На событие увода мыши с блока: сбросить все углы и анимировать их так, чтобы углы возвратились туда, где были.
  5. По щелчку: выполнить переход по ссылке.

На следующем рисунке иллюстрирую расчет:

slice02

В приведенном ниже JavaScript, у нас есть раздел для расчета. Если вы посмотрите на картинки выше, то увидите что если предположим ширина элемента 126px, то значения, которые мы должны генерировать является 0px, 63px, -63px и 126px

Таким образом, (размер элемента мы использовали в этом учебнике, 126px)

 

  • var neg = Math.round($(‘.qitem’).width() / 2) * (-1);
    (126 / 2) * (-1), neg = -63px
  • var pos = neg * (-1);
    neg = -63px, pos = (-63) * -(1), pos = 63px
  • var out = pos * 2;
    pos = 63px, pos = 63 * 2, pos = 126px

Теперь мы знаем, все математические расчеты, как должно это работает. Пора объединить все в единое целое!

  college term paper writers within paper-writer.org

Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©