e.target
— увидите, что за элемент поймал клик.<div class="burger">
<span>Какой-то текст</span>
</div>
тут часть кликов поймает не div
, а span
. Но, если добавить span'у CSS-свойство pointer-events: none;
, он перестанет взаимодействовать с мышкой, и все клики отловятся именно div'ом, как и задумывалось. <div id="container">
<h1>Text</h1>
<div id="line"></div>
#line {
width: 50%;
height: 5px;
background: orange;
}
#container {
position: relative;
}
(async function() {
// Массив с именами картинок:
var names = [ 'image_1.png', 'image_2.png', 'image_3.png'];
// Ищем все картинки имеющие атрибут id начинающийся
// со слова site_ и сохраняем результат в переменную images:
var images = document.querySelectorAll('img[id^="site_"]');
// Запускаем бесконечный цикл:
while (true) {
// Перебираем найденные картинки:
images.forEach(function(image) {
// Каждой картинке
// назначаем прозрачность:
image.style.opacity = 0;
// И также присваиваем случайную картинку из массива с именами:
image.src = 'img/works/works1/' + names[Math.round(Math.random() * links.length - 0.5)];
});
// Добавляем анимацию
// для этого использует цикл
// с прерыванием по условию:
do {
// Увеличиваем opacity на 0.05
// всем картинкам в переменной:
images.forEach(function(image) {
image.style.opacity = Number(image.style.opacity) + 0.05;
});
// Ждем 50 мс:
await new Promise(function(s) { setTimeout(s, 50); });
// И далее повторяем пока opacity не станет равной единице...
} while (images[0].style.opacity < 1);
// После завершения анимации ждем 2 секунды:
await new Promise(function(s) { setTimeout(s, 2000); });
// После чего бесконечный цикл повторится вновь и вновь...
}
})();