效果
- 鼠标进入，可以播放音乐，同时黄色块出现，鼠标离开，黄色块消失
- 按键播放音乐
步骤
-
为所有li元素绑定鼠标进入事件，在事件处理函数中
- 让当前li元素的子元素出现
- 播放对应索引位置的音乐
//查询元素
let lis = document.querySelectorAll('li')
let audios = document.querySelectorAll('audio')
// 循环遍历li，添加鼠标移入事件
lis.forEach(function (ele, index) {
ele.addEventListener('mouseenter', function () {
// 让span出现
ele.children[1].style.top = 0
// 默认情况下，播放完上一个音乐才会播放下一个音乐，我们可以通过加 load 强制加载新的音乐播放
// 同时播放音乐
// play():播放音乐
audios[index].load()
audios[index].play()
})
// 移出事件
ele.addEventListener('mouseleave', function () {
ele.children[1].style.top = '60px'
})
})
// 添加键盘按键事件
document.addEventListener('keydown', function (e) {
if (e.key >= 1 && e.key <= 7) {
// 触发指定索引位置的li元素的mouseenter事件
// 创建一个事件对象
let ev = document.createEvent('HtmlEvents')
// 初始化事件，指定事件类型
ev.initEvent('mouseenter', true, true)
// 使用元素触发事件
lis[e.key - 1].dispatchEvent(ev)
}
})
document.addEventListener('keyup', function (e) {
if (e.key >= 1 && e.key <= 7) {
// 触发指定索引位置的li元素的mouseenter事件
lis[e.key - 1].children[1].style.top = '60px'
}
})
\
