БлогNot. Как расстрелять страницу

Как расстрелять страницу

...или добавить любую другую картинку в месте клика + проиграть короткий звук (ну, не такой как у Егора был).

Понадобится пара файлов и несколько строчек на Javascript.

Ниже приведён код в работе и исходник, предполагающий что внешние файлы называются image.png (с прозрачным фоном) и sound.mp3 и находятся в той же папке, что и файл с подключённым кодом.

Используется объект Audio, который, по идее, всеми современными браузерами поддерживается.

не стреляй! (тут размещён сам скрипт, пути к файлам изменены на мои)

Please enable Javascript to fire this

<img id="gunshot" src="image.png" alt="boom!" style="position: absolute; display: none;">
<script>
window.onclick = function (event) {
 'use strict';
 let elem = document.getElementById('gunshot').cloneNode(), snd;
 document.body.appendChild(elem);
 elem.style.display = 'inline';
 elem.style.left = event.pageX - (elem.offsetWidth / 2) + 'px';
 elem.style.top = event.pageY - (elem.offsetHeight / 2) + 'px';
 snd = new Audio();
 snd.src = 'sound.mp3';
 snd.play();
};
</script>
<noscript>
 <p>Please enable Javascript to fire this</p>
</noscript>

 Файл sound.mp3 скрипта (70 Кб)

 Файл image.png скрипта (20 Кб)

14.05.2023, 16:21 [323 просмотра]


теги: картинка графика javascript mp3

К этой статье пока нет комментариев, Ваш будет первым