Звук при наведении курсора мышки на ссылку

Опубликовано: 01.09.2018

Как-то я попадал на иностранные сайты рок-команд, и мне очень понравился эффект кнопки, при наведении на которую воспроизводился щелчок, а еще большее впечатление производили кнопки, нажав на которые, я слышал крик. Тогда я обратил на это свое внимание и до сих пор считаю, что такой эффект очень удачно может подчеркнуть стиль группы или сайта.

Я разобрался, как это работает и сегодня готов поделиться со своими читателями тем, как этот эффект реализовать. Кто знает, может как раз сегодня вам этот эффект и пригодится.

Для начала, вам нужно подключить библиотеку jquery:

Кстати, можете прочитать мою статью о том, как правильно подключить библиотеку jquery .

Теперь между тегами <body></body> установите вот такой код:

<ul id="menu"> <li> Наведи на ссылку, чтобы увидеть результат №1 <a href="https://bloggood.ru/">Блог bloggood</a> || <a href="https://bloggood.ru/avtor/">Автор</a> <audio id="myaudio" preload="auto"> <source src="1.wav"> Ваш браузер не поддерживает аудио при помощи html5. </audio> </li> </ul> <script>var myaudio = $("#myaudio")[0]; $("#menu a") .mouseenter(function() { myaudio.play(); }); </script>

Строка №5 отвечает за звук, который будет воспроизводиться при наведении курсора мышки на ссылку.

"1.wav" - это название и расширение музыки.

Итак, вот абсолютно готовый код, плюс дополнительно я подключил еще два звука:

<html> <head> <meta charset="windows-1251" /> <title>Воспроизведение звука в html5 при наведении - BlogGood.ru</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> <body> <ul id="menu"> <li> Наведи на ссылку чтобы увидеть результат №1 <a href="https://bloggood.ru/">Блог bloggood</a> || <a href="https://bloggood.ru/avtor/">Автор</a> <audio id="myaudio" preload="auto"> <source src="1.wav"> Ваш браузер не поддерживает аудио при помощи html5. </audio> </li> </ul> <ul id="menu2"> <li> Наведи на ссылку чтобы увидеть результат №2 <a href="https://bloggood.ru/">Блог bloggood</a> || <a href="https://bloggood.ru/avtor/">Автор</a> <audio id="myaudio2" preload="auto"> <source src="2.wav"> Ваш браузер не поддерживает аудио при помощи html5. </audio> </li> </ul> <ul id="menu3"> <li> Наведи на ссылку чтобы увидеть результат №3 <a href="https://bloggood.ru/">Блог bloggood</a> || <a href="https://bloggood.ru/avtor/">Автор</a> <audio id="myaudio3" preload="auto"> <source src="3.mp3"> Ваш браузер не поддерживает аудио при помощи html5. </audio> </li> </ul> <script> var myaudio = $("#myaudio")[0]; $("#menu a") .mouseenter(function() { myaudio.play(); }); var myaudio2 = $("#myaudio2")[0]; $("#menu2 a") .mouseenter(function() { myaudio2.play(); }); var myaudio3 = $("#myaudio3")[0]; $("#menu3 a") .mouseenter(function() { myaudio3.play(); }); </script> </body> </html>

Если что не понятно по коду, пишите. А сейчас можете посмотреть демонстрацию эффекта и скачать готовый исходник.

[ посмотреть демо ] - [ скачать исходник ]

Звук при наведении курсора мышки на ссылку

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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