Cara buat nada suara saat hover div id pada javascript


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 &lt;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 Cara buat nada suara saat hover div id pada javascript Reviewed by Syawaluddin Amin, S.Kom on November 10, 2016 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.