Javascript特效：音乐钢琴

知识点

keydown键盘按下事件
ev[‘keyCode’] 获取当前按键
引入工具库工具库

运行效果

1-9控制按键

代码

<!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特效页面大全 (在展示页面右键--查看源文件即为源码): 1:警报对话框篇 2:菜单导航篇 3:状态栏特效篇 4:浏览器篇 5:页面背景篇 6:页面导航篇 7:页面搜素篇 8: ...
Moo.fx 超级轻量级的 javascript 特效库
Moo.fx是一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用.它非常快.易于使用.跨浏览器.符合标准,提供控制和修改任何 ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
HTML5 和 JavaScript 特效
这篇文章向大家展示8个惊艳的 HTML5 和 JavaScript 特效.作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性,越来越多的开发人员开始使用 HTML5 来制作各种交互性强.效果 ...
Javascript特效之删除内容效果
Javascript特效之删除内容效果今天分享一个网页经常会用到的删除内容效果即想列表一样的每列数据实现单列删除效果. 效果图: 点击右上角的X后该内容会慢慢删除. 实现思路:实际上很简单,就是在该 ...
Javascript特效之可翻阅上一条下一条的动态文字
Javascript特效之可翻阅上一条下一条的动态文字我们经常会看到网站有一些自动跳动的新闻动态,今天来看看新闻动态怎么实现还有怎么手动选择上一条和下一条. 先来看看效果图: 点击箭头则会显示上一条 ...
HTML5 javascript实现音乐播放器
准备毕业了,感觉好多东西都没学会,太多太多想学的知识,有种求知若渴的状态. 四年的大学就剩下一个多月了,无论将来多么困难,这条路是自己选的,走就要走的精彩! 自学了一点javascript.php,做 ...
javascript特效模拟marquee
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><script type ...
JS与CSS交互及JavaScript 特效之四大家族
一.JS获取与CSS交互问题: (1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法和非行内样式获取法 ...
python弹钢琴_用mpython x玩转掌控板——音乐钢琴
[情境导入] 在我们的生活中,我们经常可以看见利用按键控制物体发出声音的例子,例如:计算机,电子钢琴等本节内容,我们一起来学习一下,如何利用按键来控制蜂鸣器发出不同种声音的. [任务描述] 利用掌控 ...

Javascript特效：音乐钢琴

知识点

运行效果

代码

Javascript特效：音乐钢琴相关推荐

最新文章

热门文章