JavaScript实现音乐导航效果

本文实例为大家分享了Javascript实现音乐导航效果的具体代码，供大家参考，具体内容如下

效果展示

鼠标在导航栏上移动，每一项发出一种音符(do re mi fa so la xi)，同样键盘上的1-7数字也可以有同样的效果。

资源下载

音乐导航(缓动动画、会唱歌的导航)

代码

index.html

 
 
 
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
 }
 #nav {
  width: 706px;
  height: 40px;
  border: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
 }
 #nav ul {
  width: 710px;
 }
 #nav ul li {
  float: left;
  width: 100px;
  text-align: center;
  line-height: 40px;
  border-right: 1px dashed #ccc;
  position: relative;
 }
 #nav ul li a { 
  width: 100%;
  height: 100%;
  display: inline-block;
 }
 a {
  text-decoration: none;
  color: #000000;
 }
 span {
  width: 100px;
  height: 40px;
  background: skyblue;
  position: absolute;
  left: 0;
  top: 40px;
  z-index: -1;
 }