JS實(shí)現(xiàn)音樂(lè)鋼琴特效

更新時(shí)間：2020年01月06日 16:22:18 作者：KaiSarH

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)音樂(lè)鋼琴特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)音樂(lè)鋼琴的具體代碼，供大家參考，具體內(nèi)容如下

知識(shí)點(diǎn)

1.keydown鍵盤(pán)按下事件
2.ev[‘keyCode'] 獲取當(dāng)前按鍵
3.引入工具庫(kù)工具庫(kù)

運(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 播音樂(lè)
   allLis[keyCode].children[2].play();
   allLis[keyCode].children[2].currentTime = 0;
  });
 },false);
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
鋼琴

相關(guān)文章

微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果
這篇文章主要為大家詳細(xì)介紹了微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
怎么清空javascript數(shù)組
這是一個(gè)很基礎(chǔ)的問(wèn)題，但是我們往往經(jīng)常做錯(cuò)，這里簡(jiǎn)單分享下，方便需要的朋友
2013-05-05
JavaScript進(jìn)階練習(xí)及簡(jiǎn)單實(shí)例分析
下面小編就為大家?guī)?lái)一篇JavaScript進(jìn)階練習(xí)及簡(jiǎn)單實(shí)例分析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
利用IntersectionObserver實(shí)現(xiàn)動(dòng)態(tài)渲染的示例詳解
IntersectionObserver誕生已經(jīng)有幾年了，所以它的兼容性目前已經(jīng)達(dá)到可以使用的程度了。本文主要介紹了如何利用IntersectionObserver實(shí)現(xiàn)動(dòng)態(tài)渲染，感興趣的可以了解一下
2022-12-12
使用bootstrap3開(kāi)發(fā)響應(yīng)式網(wǎng)站
這篇文章主要為大家詳細(xì)介紹了使用bootstrap3開(kāi)發(fā)響應(yīng)式網(wǎng)站的具體代碼，感興趣的小伙伴們可以參考一下
2016-05-05
微信小程序跳轉(zhuǎn)到其他網(wǎng)頁(yè)(外部鏈接)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序跳轉(zhuǎn)到其他網(wǎng)頁(yè)(外部鏈接)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
微信小程序訪問(wèn)豆瓣電影api的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序訪問(wèn)豆瓣電影api的實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
JavaScript實(shí)現(xiàn)Date()日期格式化的3種常用方法
Date()日期對(duì)象是一個(gè)構(gòu)造函數(shù),必須使用new來(lái)調(diào)用創(chuàng)建我們的日期對(duì)象,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)Date()日期格式化的3種常用方法,需要的朋友可以參考下
2024-05-05
ECharts多圖表聯(lián)動(dòng)功能的實(shí)現(xiàn)過(guò)程
echarts是非常好用的圖表插件,下面這篇文章主要給大家介紹了關(guān)于ECharts多圖表聯(lián)動(dòng)功能的相關(guān)資料,需要的朋友可以參考下
2021-06-06
JS實(shí)現(xiàn)點(diǎn)擊拉拽輪播圖pc端移動(dòng)端適配
本文通過(guò)實(shí)例代碼給大家介紹了JS點(diǎn)擊拉拽輪播圖pc端移動(dòng)端適配 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09