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 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
Javascript call及apply应用场景及实例
Aug 26 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创建PDF中文文档
2006/10/09 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
深入理解js中this的用法
2016/05/28 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python网络编程 Python套接字编程
2017/09/13 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
django admin 添加自定义链接方式
2020/03/11 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
应届毕业生个人求职自荐信
2014/01/06 职场文书
班级寄语大全
2014/04/10 职场文书
三好生演讲稿
2014/09/12 职场文书
家属联谊会致辞
2015/07/31 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
python 命令行传参方法总结
2021/05/25 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB