JS实现音乐钢琴特效


Posted in Javascript onJanuary 06, 2020

本文实例为大家分享了JS实现音乐钢琴的具体代码,供大家参考,具体内容如下

知识点

1.keydown键盘按下事件
2.ev[‘keyCode'] 获取当前按键
3.引入工具库工具库

运行效果

1-9控制按键

JS实现音乐钢琴特效

代码

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 #Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 #Javascript
Vue前端项目部署IIS的实现
Jan 06 #Javascript
Vue学习之常用指令实例详解
Jan 06 #Javascript
Vue学习之组件用法实例详解
Jan 06 #Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 #Javascript
Vue学习之axios的使用方法实例分析
Jan 06 #Javascript
You might like
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python实现低通滤波器代码
2020/02/26 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
校园公益广告语
2014/03/13 职场文书
中班幼儿评语大全
2014/04/30 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
实名检举信范文
2015/03/02 职场文书
担保书格式范文
2015/09/22 职场文书
MySQL创建管理子分区
2022/04/13 MySQL
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL