悬停时播放 JQuery 菜单声音
Posted
技术标签:
【中文标题】悬停时播放 JQuery 菜单声音【英文标题】：JQuery Menu Sound Play On Hover 【发布时间】：2011-07-24 16:56:25 【问题描述】：我在右侧有一个菜单，当我将鼠标悬停在上面时，我希望播放此点击声音。但是我不明白如何启用它。
我使用无序列表，而 li 有链接到页面的链接。
这是我目前得到的。
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;
我们将不胜感激。
【问题讨论】：
【参考方案1】：我认为这对你有用 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/ 或 http://css-tricks.com/8954-play-sound-on-hover/
【讨论】：
以上是关于悬停时播放 JQuery 菜单声音的主要内容，如果未能解决你的问题，请参考以下文章