如上图所示，这就是360音乐导航，里面有很多功能，包括键盘弹琴，看谱弹琴，

录制钢琴曲等等，而我在这里就只做了简单的鼠标弹钢琴功能。

<!-- 导航栏代码--> 

<div id="nav">
        <ul>
         <li class="nav_li"><a href="">首页</a></li>
         <li class="nav_li"><a href="">关于我</a></li>
         <li class="nav_li"><a href="">Program编程</a></li>
         <li class="nav_li"><a href="">Life生活</a></li>
         <li class="nav_li"><a href="">Essay随笔</a></li>
         <li class="nav_li"><a href="">Diary日记</a></li>
         <li class="nav_li"><a href="">留言板</a></li>
         
        </ul>
  </div>

<!-- 定义隐藏域音乐代码-->    

<div style="display:none;">
        <audio controls="controls"id='piano_1'>
            <source src="1.ogg" type="audio/ogg" />
        </audio>
        <audio controls="controls"id='piano_2'>
            <source src="2.ogg" type="audio/ogg" />
        </audio>
        <audio controls="controls"id='piano_3'>
            <source src="3.ogg" type="audio/ogg" />
        </audio>
        <audio controls="controls"id='piano_4'>
            <source src="4.ogg" type="audio/ogg" />
        </audio>
        <audio controls="controls"id='piano_5'>
            <source src="5.ogg" type="audio/ogg" />
        </audio>
        <audio controls="controls"id='piano_6'>
            <source src="6.ogg" type="audio/ogg" />
        </audio>
        <audio controls="controls"id='piano_7'>
            <source src="7.ogg" type="audio/ogg" />
        </audio>
</div>

<!-- js代码--> 	  

        $('.nav_li').mouseover(function(){

            var num=$(this).index()+1;
            var p=document.getElementById('piano_'+num);
            p.load();
            p.play();

        });

注意事项：

    js代码要放在html代码以下或者放在$(document).ready(function(){...})里面;

    js代码中变量p要使用getElementById获取，因为jquery选择器返回的是jquery对象而不是dom对象，而jquery对象没有play方法，所以要先转换dom对象或者直接使用getElementById获取。 

以下附件是音乐文件

media.zip

                                原作者www.wangzi.love