Assalamu'alaikum wr wb,
Kali ini saya akan share Cara buat nada suara saat hover div id pada javascript.
Berikut ini syntaxnya.
______________________________
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Play Sound on :hover</title>
<link rel='stylesheet' href='css/style.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div id="page-wrap">
<section id="two"><div class="inside">
<h2>Cloned <audio>, one for each menu item</h2>
<p>Smoothest but not perfect.</p>
<ul id="nav-two" class="nav">
<li>
<a href="#">Home</a>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<audio id="beep-two" controls preload="auto" style="display: none;">
<source src="audio/beep.mp3" controls></source>
<source src="audio/beep.ogg" controls></source>
Your browser isn't invited for super fun time.
</audio>
<script>$("#nav-two a")
.each(function(i) {
if (i != 0) {
$("#beep-two")
.clone()
.attr("id", "beep-two" + i)
.appendTo($(this).parent());
}
$(this).data("beeper", i);
})
.mouseenter(function() {
$("#beep-two" + $(this).data("beeper"))[0].play();
});
$("#beep-two").attr("id", "beep-two0");</script>
</div></section>
</div>
</body>
</html>
______________________________
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/
Sumber : https://css-tricks.com/
Cara buat nada suara saat hover div id pada javascript
Reviewed by Syawaluddin Amin, S.Kom
on
November 10, 2016
Rating:

Tidak ada komentar: