Навигация

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	IP-Калькулятор	NSLOOKUP	Видео IT
Баллистический калькулятор: тип 1 и тип 2 Калькулятор поправок в MOA и СТП Баллистический коэффициент пневматики		Файлы NSLOOKUP IP-Калькулятор

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