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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
layer 关闭指定弹出层的例子
Sep 25 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php表单提交问题的解决方法
2011/04/12 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
解决DataFrame排序sort的问题
2018/06/07 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
挂职自我鉴定
2014/02/26 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers