Навигация

JavaScript: события на примере галереи

Создадим простую галерею картинок с помощью JavaScript, где при наведении на картинку она будет исчезать а при наведении на последнюю будем открывать превьюшку.

Таким образом мы познакомимся с событиями.

Имеется такая иерархия в каталоге:

Собственно код стилей style.css:

#div { width: 300px; margin-left: 150; margin-top: 50; } ul li { display: inline-block; } ul li>img { width: 100px; } ul li { position: relative; } ul li div.preview { position: absolute; top: -90px; left: 120px; }

Код index.html:

<html> <head> <title>JavaScript События</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="div"> <h1>Галерея</h1> <p>Наведите курсор на картинку</p> <ul class="images"> <li><img src="images/1a.jpg" alt="black"></li> <li><img src="images/2a.jpg" alt="white"></li> <li><img src="images/3a.jpg" alt="blue"></li> <li><img src="images/4a.jpg" alt="red"></li> <li><img src="images/5a.jpg" alt="gray"></li> </ul> <script src="script.js"></script> </body> </html>

Код script.js:

//Прослушиватель для <ul class="images"> //Вызов querySelector(css) возвращает только первый элемент, соответствующий CSS-селектору //addEventListener (событие, обработчик события, этап события) и метод removeEventListener (событие, обработчик события, этап события) //С помощью которых обработчик события можно задать или отменить для любого DOM-элемента в самом скрипте без назначение атрибута on + "событие" //1-й параметр addEventListener – это событие без префикса "on" ("click", "mousemove", "blur", "load" ...), которое вешают на элемент //2-й параметр – обработчик события, функция которая будет выполняться при события указанной в первом параметре //3-й параметр – этап события //если false, то обработчик события будет выполняться на этапе всплытия события (если существуют вложении элементы с тем же обработчиком события) //если true - то на этапе перехвата события: по-дефолту, можно спокойно указывать последним параметром false //Спасибо ресурсу: http://sv-igor.com/ru/javascript/61-addeventlistener.html document.querySelector('.images').addEventListener('mouseover', function(object){ //Если мы навели мышь на картинку if(object.target.tagName === 'IMG'){ //Если осталось более одной картинки удалим цель наведения или покажем alt if(this.querySelectorAll('li').length > 1){ var removeTarget = object.target.parentNode; removeTarget.parentNode.removeChild(removeTarget); }else{ document.querySelector('#div p').innerHTML = "<p>Эта картинка: " + object.target.alt + "</p>"; } //Создадим контейнер для превьюшки var divElement = document.createElement('div'); divElement.className = 'preview'; object.target.parentNode.appendChild(divElement); //Создадим превьюшку var previewImg = document.createElement('img'); var targetImg = object.target.src; previewImg.src = targetImg.substr(0, targetImg.length-5) + 'b.jpg'; divElement.appendChild(previewImg); //Убрать превью при отведении мыши с картинки object.target.addEventListener('mouseout', function handler(d) { var Node = d.target.parentNode.querySelector('div.preview'); Node.parentNode.removeChild(Node); object.target.removeEventListener('mouseout', handler, false); }, false); } }, false);

Комментарии пользователей

Эту новость ещё не комментировалиНаписать комментарий

Анонимам нельзя оставоять комментарии, зарегистрируйтесь!

Главная	⇒ Статьи по IT и Мото-Тематике ⇐	Видео IT	Файлы	Контакты
JavaScript/jQuery/AJAX	Учебники Python 3, Powershell, Linux	IP-Калькулятор	NSLOOKUP	Карта сайта
Группа в ВК	Краткий учебник PostgreSQL \| Docker	Учебник по BASH	Полезные команды Unix	Видео про мотоциклы и разное

Контакты для обмена ссылками между сайтами	Видео к статьям на Youtube	Код обмена баннерами
Мои друзья:			Сообщество сисадминов
		© Snakeproject.ru создан в 2013 году. При копировании материала с сайта - оставьте ссылку.