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 相关文章推荐
列表内容的选择
Jun 30 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jQuery 中DOM 操作详解
Jan 13 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
学习ExtJS table布局
2009/10/08 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue 监听屏幕高度的实例
2018/09/05 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
解除劳动合同协议书
2014/04/14 职场文书
求职教师自荐书
2014/06/19 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL