JS实现音乐钢琴特效
程序员文章站
2022-04-10 09:59:00
本文实例为大家分享了js实现音乐钢琴的具体代码,供大家参考,具体内容如下
知识点
1.keydown键盘按下事件
2.ev[‘keycode'] 获取当前按键
3.引入工具库...
本文实例为大家分享了js实现音乐钢琴的具体代码,供大家参考,具体内容如下
知识点
1.keydown键盘按下事件
2.ev[‘keycode'] 获取当前按键
3.引入工具库
运行效果
1-9控制按键
代码
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } div{ height: 50px; width: 630px; /*background-color: red;*/ position: absolute; top: 300px; left: 50%; transform: translatex(-50%); } ul{ height: 100%; width: 100%; list-style: none; display: flex; overflow: hidden; border: 1px solid #000; } li{ height: 100%; width: 100%; /*background-color: yellow;*/ position: relative; border-right: 1px dashed #000; } li:last-child{ border-right:none } span{ width: 70px; height: 50px; background-color: skyblue; position: absolute; left: 0; top: 50px; z-index: -1; } a{ text-decoration: none;color: #000; line-height: 50px; position: absolute; left: 50%; transform: translatex(-50%); font-size: 20px; cursor: default; } </style> </head> <body> <div id="box"> <ul id="ul"> <li><a href="">1</a><span></span> <audio src="source/a1.mp3"></audio></li> <li><a href="">2</a><span></span> <audio src="source/a2.mp3"></audio></li> <li><a href="">3</a><span></span> <audio src="source/a3.mp3"></audio></li> <li><a href="">4</a><span></span> <audio src="source/a4.mp3"></audio></li> <li><a href="">5</a><span></span> <audio src="source/a5.mp3"></audio></li> <li><a href="">6</a><span></span> <audio src="source/a6.mp3"></audio></li> <li><a href="">7</a><span></span> <audio src="source/a7.mp3"></audio></li> <li><a href="">8</a><span></span> <audio src="source/a8.mp3"></audio></li> <li><a href="">9</a><span></span> <audio src="source/a9.mp3"></audio></li> </ul> </div> <script src="mytools.js"></script> <script> var alllis = mytool.$('ul').children; document.addeventlistener('keydown',function (ev) { var keycode = ev['keycode'] - 49; mytool.slowmoving(alllis[keycode].children[1], {"top": 0}, function () { mytool.slowmoving(alllis[keycode].children[1], {"top": 50}); // 2.3 播音乐 alllis[keycode].children[2].play(); alllis[keycode].children[2].currenttime = 0; }); },false); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。