Question

我右边有一个菜单，当我盘旋时我想要点击这个咔嗒声。但是我不明白如何启用它。

我使用无序列表，并且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;}

非常感谢很多帮助。

Answer 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菜单声音播放悬停

1 个答案: