360钢琴

最新推荐文章于 2024-07-12 16:31:27 发布

秋恨雪

最新推荐文章于 2024-07-12 16:31:27 发布

阅读量1.1k

点赞数

分类专栏： HTML5 & CSS3 文章标签： html5 css3 360钢琴动画效果

本文链接：https://blog.csdn.net/sinat_27706697/article/details/49444151

版权

HTML5 & CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

从这一节开始，我会使用实例给大家讲解一些关于html5和css3的知识，这一节介绍一下360钢琴；相信大家都已经很熟悉了。就是360浏览器上面的方块阵，可以将鼠标移动到方块上面，发出钢琴上面的音符，或者直接使用键盘上面的数字进行弹奏，放佛就是在弹奏真实的钢琴一般。先看看最终的效果。

由于听不出音效，所以还是希望大家自己写代码尝试尝试。

我使用的音效素材如下：

就是这里所列举的 "ogg" 文件。

一、需求分析：

1. 这里的指示方块，是一排排列，所以我们很容易想到使用ul li布局。

2. 当鼠标经过每个方块或者按下键盘上面对应的数字键，对应的方块将有红色内容弹起，表示这个方块有对应的声音发出。红色方块处理思路：1. 再定义一个同样的ul li，颜色为红色，并且位置在绿色指示方块的正下方；2. 直接在已有的绿色方块的li中定义一个块级元素，占满方块，同样的，位置默认也是显示在指示方块的正下方。这里采用第二种方式：示意图如下：

3. 初始状态时，红色的部分都不应该显示出来，所以我们应该将绿色指示区域的内容，包装在一个大的容器中，并且容器的高度等于绿色指示器的高度，超出的部分不显示。

二、代码分析：

1. HTML代码:

<body>
	<div class="music">
		<audio src="music/c4.ogg"></audio>
		<audio src="music/d4.ogg"></audio>
		<audio src="music/e4.ogg"></audio>
		<audio src="music/f4.ogg"></audio>
		<audio src="music/g4.ogg"></audio>
		<audio src="music/a4.ogg"></audio>
		<audio src="music/b4.ogg"></audio>
		<audio src="music/c4m.ogg"></audio>
	</div>
	<div class="btn">
		<ul>
			<li>do<span></span></li>
			<li>ruai<span></span></li>
			<li>mi<span></span></li>
			<li>fa<span></span></li>
			<li>so<span></span></li>
			<li>la<span></span></li>
			<li>xi<span></span></li>
			<li>do(h)<span></span></li>
		</ul>
	</div>
</body>

body中两组代码，class为music的div用来存放所有需要播放的音效，这里的音效文件为ogg格式，只有html5才支持；这些文件只是用来播放，并且不会显示及占据其他元素的位置； class为btn的div就是用来存放绿色方块组；ul li就是所有显示的绿色方块；里面的span元素就是后来显示出来的红色方块。

2. CSS代码：

*{
			margin:0;
			padding:0;
		}

		.btn{
			width:960px;
			height:50px;
			margin:100px auto;
		}

		.btn ul{
			width:960px;
			height:50px;
			overflow: hidden;
			list-style: none;
		}

		.btn ul li{
			float:left;
			width:100px;
			height:50px;
			background-color: green;
			margin-right:20px;
			cursor:pointer;
			top:0;
			left:0;
			position: relative;
			text-align: center;
			font-size: 28px;
			color: yellow;
		}

		.btn ul li span{
			display: block;
			width:100px;
			height:50px;
			position: absolute;
			top:50px;
			left:0;
			background-color: red;
		}

css代码，我只解释最后的 .btn ul li span 这个样式效果: 设置了span的宽高及显示形态为block，表明了红色方块会占满整个li显示，而 "top:50px;" 就会让所有的红色方块在所有的绿色方块正下方显示了。

3. JQuery代码:

$(function(){
			$(".btn ul li").mouseenter(function(){
				var index = $(this).index();

				$(this).children().eq(0).animate({"top": 0},500);

				$(".music audio").eq(index)[0].load();
				$(".music audio").eq(index)[0].play();
			}).mouseleave(function(){
				var index = $(this).index();

				$(this).children().eq(0).animate({"top": 50},500);
			});

			$(window).keydown(function(e){
				var code = e.keyCode;
				if(code >=49 && code <= 56){
					var actualCode = code - 49;
					$(".btn ul li").eq(actualCode).trigger("mouseenter");
				}
			}).keyup(function(e){
				var code = e.keyCode;
				if(code >=49 && code <= 56){
					var actualCode = code - 49;
					$(".btn ul li").eq(actualCode).trigger("mouseleave");
				}
			});
		});

这里很明显，有两种操作：

1. 鼠标经过离开的操作：

鼠标经过的时候，将对应的span的top值设置为0，并且播放音效；离开的时候设置为50。

2. 键盘按下抬起的操作：

键盘按下的时候，根据键盘码计算得出对应的数字值，然后与 "鼠标经过与离开" 的代码一致。

秋恨雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
360钢琴

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。从这一节开始，我会使用实例给大家讲解一些关于html5和css3的知识，这一节介绍一下360钢琴；相信大家都已经很熟悉了。就是360浏览器上面的方块阵，可以将鼠标移动到方块上面，发出钢琴上面的音符，或者直接使用键盘上面的数字进行弹奏，放佛就是在弹奏真实的钢琴一般。先看看最终的效果。由于听不出音效，...
复制链接

扫一扫