效果图
基本样式
<style> * { margin: 0; padding: 0; list-style: none; } nav { width: 700px; height: 50px; background-color: #333; margin: 0 auto; overflow: hidden; } nav ul { display: flex; } nav li { width: 100px; height: 50px; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; } nav li i { width: 100px; height: 50px; background-color: palegreen; position: absolute; top: 50px; left: 0; } nav li span { position: relative; z-index: 1; } .box { display: flex; justify-content: center; } .box img { width: 700px; } </style>
<body> <nav> <ul> <li> <span>导航1</span> <i></i> </li> <li> <span>导航2</span> <i></i> </li> <li> <span>导航3</span> <i></i> </li> <li> <span>导航4</span> <i></i> </li> <li> <span>导航5</span> <i></i> </li> <li> <span>导航6</span> <i></i> </li> <li> <span>导航7</span> <i></i> </li> </ul> </nav> <div class="box"> <img src="../image/musice3.jpg" alt=""> </div> <!-- 音频标签准备 --> <audio src="../mp3/1.mp3"></audio> <audio src="../mp3/2.mp3"></audio> <audio src="../mp3/3.mp3"></audio> <audio src="../mp3/4.mp3"></audio> <audio src="../mp3/5.mp3"></audio> <audio src="../mp3/6.mp3"></audio> <audio src="../mp3/7.mp3"></audio> </body>
记得引入jq哦
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../jq/jquery-1.12.4.min.js"></script> <style> * { margin: 0; padding: 0; list-style: none; } nav { width: 700px; height: 50px; background-color: #333; margin: 0 auto; overflow: hidden; } nav ul { display: flex; } nav li { width: 100px; height: 50px; color: #fff; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; } nav li i { width: 100px; height: 50px; background-color: palegreen; position: absolute; top: 50px; left: 0; } nav li span { position: relative; z-index: 1; } .box { display: flex; justify-content: center; } .box img { width: 700px; } </style> <script> $(function () { // 鼠标移入 $('li').mouseover(function () { let index = $(this).index() // 重新加载事件 $('audio').get(index).load(); $('audio').get(index).play(); // console.log($(this)); $(this).children('i').stop().animate({ top: 0 }) }).mouseout(function () { $(this).children('i').stop().animate({ top: 50 }) }) }) // 键盘按下事件keydown $(window).on('keydown', function (e) { // 取49-55 if (e.keyCode >= 49 && e.keyCode <= 55) { let index = e.keyCode - 49 // li的下标index的后代i $('li').eq(index).find('i').animate({ top: 0 }) $('audio').get(index).load(); $('audio').get(index).play(); } }).on('keyup', function (e) { // console.log(1); let index = e.keyCode - 49 // li的下标index的后代i $('li').eq(index).find('i').animate({ top: 50 }) }) </script> </head> <body> <nav> <ul> <li> <span>导航1</span> <i></i> </li> <li> <span>导航2</span> <i></i> </li> <li> <span>导航3</span> <i></i> </li> <li> <span>导航4</span> <i></i> </li> <li> <span>导航5</span> <i></i> </li> <li> <span>导航6</span> <i></i> </li> <li> <span>导航7</span> <i></i> </li> </ul> </nav> <div class="box"> <img src="../image/musice3.jpg" alt=""> </div> <!-- 音频标签准备 --> <audio src="../mp3/1.mp3"></audio> <audio src="../mp3/2.mp3"></audio> <audio src="../mp3/3.mp3"></audio> <audio src="../mp3/4.mp3"></audio> <audio src="../mp3/5.mp3"></audio> <audio src="../mp3/6.mp3"></audio> <audio src="../mp3/7.mp3"></audio> </body> </html>
最后可以输入键盘1-7就是可以弹奏自己喜欢的音乐啦
