您好,登錄后才能下訂單哦!
小編給大家分享一下JS實(shí)現(xiàn)音樂鋼琴特效的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體內(nèi)容如下
知識點(diǎn)
1.keydown鍵盤按下事件
2.ev[‘keyCode'] 獲取當(dāng)前按鍵
3.引入工具庫工具庫
運(yùn)行效果
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>
以上是“JS實(shí)現(xiàn)音樂鋼琴特效的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。