HTML钢琴效果,JS实现钢琴效果
效果图如下(点击对应的按键会有不同的声音):
素材准备:
按键音效:
背景图片:
代码实现:
钢琴
*{margin:0px;padding:0px;list-style:none;}
#all{width:800px;height:300px;border:solid 0px #333;margin:100px auto;position:relative;}
body{background:url(bg_4.jpg);}
li{width:5%;height:100%;background:#fff;float:left;border-right:solid 2px black;border-radius:0px 0px 10px 10px;text-align:center;line-height:35em;}
.black{width:4%;height:60%;background:#111;border-radius:0px 0px 10px 10px;left:10px;top:0px;position:absolute;}
- C3
- D3
- F3
- G3
- A3
- B3
- C4
- D4
- E4
- F4
- G4
- A4
- B4
- C5
- D5
- E5
- F5
- G5
- A5
//鼠标按下事件
$('li').mousedown(function(){
//拼接路径
var src = "./music/"+$(this).html().toLowerCase()+'.wav.mp3';
//创建媒体对象
var audio = new Audio(src);
//调用play方法
audio.play();
// 改变当前按键的颜色
$(this).css('background','-moz-linear-gradient(top,#eee,#222)');
})
//鼠标抬起事件
$('li').mouseup(function(){
//回复键盘的颜色
$(this).css('background','white');
})
//mouseover mouseout
$('li').hover(function(){
$(this).css('cursor','pointer');
},function(){
$(this).css('cursor','default')
})
//键盘按下事件
$(window).keypress(function(e){
//获取当前的按键
var k = e.key.toLowerCase();
//针对按键进行不同的操作
switch(k){
case "q":
$('li:contains(C3)').mousedown();
break;
case "w":
$('li:contains(D3)').mousedown();
break;
case "e":
$('li:contains(F3)').mousedown();
break;
case "r":
$('li:contains(G3)').mousedown();
break;
case "t":
$('li:contains(A3)').mousedown();
break;
case "y":
$('li:contains(B3)').mousedown();
break;
case "u":
$('li:contains(C4)').mousedown();
break;
case "i":
$('li:contains(D4)').mousedown();
break;
case "o":
$('li:contains(E4)').mousedown();
break;
case "p":
$('li:contains(F4)').mousedown();
break;
case "[":
$('li:contains(G4)').mousedown();
break;
case "]":
$('li:contains(A4)').mousedown();
break;
case "\\":
$('li:contains(B4)').mousedown();
break;
case "pageup":
$('li:contains(C5)').mousedown();
break;
case "pagedown":
$('li:contains(D5)').mousedown();
break;
case "end":
$('li:contains(E5)').mousedown();
break;
default:
return false;
}
return false;
})
$(window).keyup(function(){
$('li').not('.black').css('background','white');
})
附上一首曲子:会弹钢琴的试试效果吧
HTML钢琴效果,JS实现钢琴效果相关推荐
- html实现点赞效果,js实现点赞效果
javascript实现点赞或踩加一,再点一次减一的效果 好多新手在网上找不到点赞效果的代码,今天给大家分享一个采用js写的简单方法(有点错误,已修正) 效果图如下 HTML代码 可直接ctrl + ...
- html固定悬浮窗效果,js 固定悬浮效果实现思路代码
(function($){ var ele_fix = $("#div_right"); //浮动窗口 var _main = $(".main"); //浮动 ...
- 分享114个JS特效动画效果,总有一款适合您
分享114个JS特效动画效果,总有一款适合您 114个JS特效动画效果下载链接:https://pan.baidu.com/s/18_NR3eaxDddWSHqAbMYiuw?pwd=m25p 提取 ...
- 分享111个JS特效动画效果,总有一款适合您
分享111个JS特效动画效果,总有一款适合您 111个JS特效动画效果下载链接:https://pan.baidu.com/s/1s8mWkRlIZML2t5v1g1rlDA?pwd=pe5p 提取 ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
- php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
- php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
- 《javaScript100例|04》自动播放——Js幻灯片缓冲效果
目录 效果图 示例 源码地址: 效果图 示例 <html> <head> <title>自动播放--幻灯片缓冲效果</title> <style& ...
- JS特效代码大全(十一)超炫的js图片展示效果(三)
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
最新文章
- 也谈.Net中间语言——破解Delphi2CS行数和时间限制
- springboot发送http请求
- 第16章 C预处理器和C库 16.3 在#define中使用参数
- weblogic92 启动慢解决办法
- 2021年北京学校高考成绩查询,2021年北京高考成绩查询时间及入口【官方】
- nginx+uwsgi 部署
- div的水平居中和垂直居中
- 9. JEB 1.5插件编写一
- Tricks Device 最短路+最大流
- Scala:函数和闭包
- get_digits
- 利用AOP+Swagger注解实现日志记录功能
- 【软件工具】--- 软件安装管家目录
- Android开发之连接夜神模拟器
- 来自30岁女程序员的自我唤醒
- 微信小程序 逆向还原
- 【网络协议模糊测试实战】使用sulley对PCManFTP进行模糊测试
- turtle实例8 玫瑰曲线
- 理解中国经济的五层思维-中国视角下的宏观经济
- 20144303石宇森 《信息安全系统设计基础》第13周学习总结