Вы здесь: Главная » JavaScript » Обработка событий » Обработка события onmousemove на примере поздравительной открытки

Обработка события onmousemove на примере поздравительной открытки

Обработка события onmousemove подразумевает, что мы будем отслеживать перемещение указателя мыши относительно какого-либо элемента, либо относительно всего документа.

Для того обработки события onmousemove мы создадим поздравительную открытку, при наведении на которую за счет использования CSS-свойств 3D трансформаций и перспективы мы будем несколько разворачивать основной блок.

Пожалуй, в этом примере будет больше css-свойств, нежели каких-то нюансов обработки событий, поэтому советую прочитать статью "CSS cвойства элемента. Использование в JavaScript".

Разметка, CSS-стили и начальный JS-код для обработки события onmousemove

Разметка открытки:

Как видите, все очень просто.

CSS-стили

Стилей намного больше, чем разметки.

JS-код

Обратите внимание, что мы обрабатываем не только событие onmousemove (mousemove при записи его в методе addEventListener()), меняя css-свойства группы 3D-transform и рассчитывая при этом угол поворота по осям X и Y в зависимости от местоположения курсора мыши (свойства e.offsetX и e.offsetY, где e - это переменная, связанная с объектом события.), но и событие mouseout, которое наступает при выходе указателя мыши за пределы нашего блока .birthday-card. При обработке события mouseout мы возвращаем наш блок с открыткой в первоначальное положение без поворота по осям X и Y (свойства rotateX(0deg) и rotateY(0deg)).

Давайте теперь посмотрим на сам пример:

Добавляем имя пользователя (именинника) в заголовок открытки

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

Добавляем JS-код для обработки данных, введенных пользователем:

В этом коде мы обрабатываем событие клика на кнопке с текстом "Задать имя" и атрибутом id="addName", отображая скрытый изначально блок с полем ввода имени именинника и кнопкой "Ок" с атрибутом id="nameBtn". Когда пользователь щелкает по этой кнопке, но при этом ничего не вводит или вводит пробелы, мы проверяем, является ли пустой очищенная методом trim() строка, и выводим вместо имени посетителя слово "чувак" :). Можете заменить его на любой другое в собственном коде.

Если же пользователь ввел не пустую строку, мы проверяем в функции femaleName(name), является ли это имя женским, подразумевая, что большинство женских имен заканчиваются на букву "а" или "я". Именно они указаны в регулярном выражении new RegExp(/[ая]$/i).

Не обошлось, конечно, без казусов. Если вы введете, например, "Вася" или "Толя", то получите "Дорогая Вася" или "Дорогая Толя" ))), поэтому мужские имена лучше вводить полностью.

Наш пример изменился. Нажмите на кнопку-ссылку внизу - и увидите форму для ввода имени именинника:

Добавляем переход по ссылке с параметром в виде имени с помощью свойства location.search

Возможно, вы задумались  о том, что неплохо бы такую открытку послать имениннику в день рождения, отправив ему ссылку в письме или в любом из мессенжеров (Вайбер, Telegram, WhatsApp). И в этом случае уж конечно не стоит отображать кнопку для ввода имени. А сам блок с полем ввода изначально скрыт в стилях за счет свойства display: none.

Воспользуемся для трансформации кода свойством глобального объекта Location search, которое возвращает часть адреса страницы после знака ?. Т.е. в ссылке вида http://mysite.com/card.html?Наташа в свойстве location.search мы получим строку ?Наташа. И эту строку нам нужно будет обработать, убрав из нее знак вопроса и подставив вместо имени пользователя в заголовок нашей открытки. Для этого нам обязательно надо проверить, а существует ли строка в этом свойстве - в этом случае длина строки locationName.length будет больше ноля. И если это так, то мы скрываем кнопку-ссылку с текстом "Задать имя" и изменяем заголовок, воспользовавшись функцией femaleName(name):

В этом коде мы используем метод decodeURIComponent() для того, чтобы декодировать кириллические символы, которые браузер  преобразует  в формат Unicode. Без этого, например, имя Николай будет выглядеть, как "B8%D0%BA%D0%BE%D0%BB%D0%B0". Не слишком понятно, не так ли?

Следующий пример отобразит вам открытку с именем Наташа:

Заметили, что внизу отсутствует кнопка-ссылка "Задать имя"?

И это еще не все. На основе этого кода мы можем сформировать ссылку, которую, собственно, и будем отсылать друзьям-знакомым. Ниже приведен код, который сначала формирует запрос с помощью диалогового окна prompt() (можно заменить полями формы), затем формирует ссылку нужного вида и копирует эту ссылку в буфер обмена.

Попробуйте сами. После ввода имени ссылка должна скопироваться в буфер обмена и ее сразу можно высылать имениннику.

Нажмите на кнопку для получения ссылки с нужным вам именем.

Задать имя именинника

Вот такой получился длинный пример, в котором, кроме обработки события onmousemove, мы сделали очень много вещей.

 

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *