JQuery的菜单声音播放悬停 [英] JQuery Menu Sound Play On Hover
本文介绍了JQuery的菜单声音播放悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在右边的菜单，并在上空盘旋，我想这个节拍声播放。不过，我不明白这是如何会被激活。
I have a menu on the right, and when hovered over I want this click sound to play. However I don't understand how this would be enabled.
我用一个无序列表，而李的有链接到网页的链接。
I use an unordered list, and the li's have links that link to pages.
这是我得到那么远。
的index.html
<html>
<head>
<title>Simple Learning Project</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#navigation').append('<div id="libg"></div>');
var posTop, liW, liH;
$('#nav li a').hover(function(){
posTop = $(this).offset().top;
liW = $(this).parent('li').outerWidth();
liH = $(this).parent('li').height();
$('#libg').css({top: posTop+'px', height: liH }).stop().animate({width: liW+'px', opacity: '1'}, 500);
},function(){
$('#libg').stop().animate({width: '0px', opacity: '0'}, 0);
});
var navhover = $('#nav li a');
var navaudio = navhover.find('audio')[0];
navhover.hover(function(){
navaudio.play();
}, function(){
navaudio.stop();
});
});
</script>
</head>
<body>
<div id="download">
<a href="jquery-flash-like-menu.zip">Download Source!</a>
</div>
<div id="navigation">
<ul id="nav">
<audio src="sounds/click.mp3" preload="auto"></audio>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</body>
</html>
的style.css
body {
background-color:#222;}
a {
transition:all 200ms ease-in-out 0s;
-webkit-transition:all 200ms ease-in-out 0s;
-moz-transition:all 200ms ease-in-out 0s;
-o-transition:all 200ms ease-in-out 0s;}
div#download a {
position:absolute;
bottom:0px;
right:0px;
width:auto;
height:auto;
color:#555;
text-decoration:none;
padding:0px 5px 5px 0px;}
div#download a:hover {
position:absolute;
bottom:0px;
right:0px;
width:auto;
height:auto;
color:#FFF;}
div#navigation {
position:absolute;
top:0px;
left:0px;
width:200px;
height:100%;
background-color:#333;
box-shadow:0px 0px 16px #000;}
ul#nav {
position:absolute;
top:30%;
width:80%;
height:auto;
font-size:16px;
font-family:times new roman;
list-style:none outside none;
margin:-auto;
z-index:1;}
ul#nav li {
/* background color applied by libg */
color:#FFF;
border-bottom:1px solid #333;
padding:0px 0px 0px 20px;
margin:0px 0px 5px -40px;}
ul#nav li a {
color:#999;
text-decoration:none;}
ul#nav li a:hover {
color:#FFF;}
/* nav li bg */
#libg{
position:absolute;
left:0px;
width:0px;
background:#666;
z-index:0;
opacity:0;
-moz-opacity:0.0;}
很多帮助将不胜AP preciated。
Much help would be greatly appreciated.
推荐答案
我认为这会很有用U http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/或 http://css-tricks.com/8954-play-sound-on -hover /
i think this will useful for u http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/ or http://css-tricks.com/8954-play-sound-on-hover/
这篇关于JQuery的菜单声音播放悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
