HTML5钢琴键盘样式特效代码下载


HTML5钢琴键盘样式特效代码下载
HTML5钢琴键盘样式特效代码下载以及钢琴键盘样式等js/jquery网页特效代码下载。

1. HTML代码

<ul>
	<li><div></div><p></p></li>
	<li><div></div><p></p></li>
	<li><div></div></li>
	<li><div></div><p></p></li>
	<li><div></div><p></p></li>
	<li><div></div><p></p></li>
	<li><div></div></li>
	<li><div></div></li>
</ul>
<div class="zzr">制作人:Jan</div>
<script>
	for(var i=1; i<=8; i++){
		var addaudio=document.createElement("audio");
		addaudio.setAttribute("src","audios/"+"w"+i+".ogv")
		document.body.appendChild(addaudio);
	}
	for(var i=1; i<=5; i++){
		var addaudio=document.createElement("audio");
		addaudio.setAttribute("src","audios/"+"b"+i+".ogv")
		document.body.appendChild(addaudio);
	}
	var audios=document.getElementsByTagName("audio"),
		buttons=document.querySelectorAll("ul>li>div"),
		blacks=document.querySelectorAll("ul>li>p");
	//alert(blacks.length);
	for (var i=0; i<8; i++){
		buttons[i].index=i;
		buttons[i].onclick=function(){
			//alert(this.index);
			audios[this.index].load();
			audios[this.index].play();
			//alert(audios[this.index].src);
		}
	}
	for (var i=0; i<5; i++){
		blacks[i].index=i+8;
		blacks[i].onclick=function(){
			//alert(this.index);
			audios[this.index].load();
			audios[this.index].play();
			//alert(audios[this.index].src);
		}
	}
	/*document.body.onkeydown=function(e){
		document.title=e.keyCode;
		if(e.keyCode==65){
			audios[0].load();
			audios[0].play();
		}
	}*/
	// 操作键盘钢琴白键发出声音
	var keyCodes = new Array(83,68,70,71,72,74,75,76,69,82,89,85,73);
	document.body.onkeydown=function(e){
	//document.title=e.keyCode;
	for(var i=0; i<keyCodes.length; i++){
		if(e.keyCode==keyCodes[i]){
			if(i<8)
			{
				 buttons[i].style.background= "linear-gradient(45deg, #dad9d9, #ffffff)";
				 buttons[i].style.boxShadow="inset 3px -2px  0  #eeebeb";
			}else{
                blacks[i-8].style.background="linear-gradient(45deg, #4c4c4c, #444444)";
				blacks[i-8].style.boxShadow="inset 3px -5px 0 #2c2c2c";
			}
			audios[i].load();
			audios[i].play();
		}
	}
}
	document.body.onkeyup=function(e){
	//document.title=e.keyCode;
	for(var i=0; i<keyCodes.length; i++){
		if(e.keyCode==keyCodes[i]){
			if(i<8)
			{
				 buttons[i].style.background= null;
				 buttons[i].style.boxShadow="inset 5px -8px  0  #eeebeb";
			}else{
                blacks[i-8].style.background=null;
				blacks[i-8].style.boxShadow="inset 5px -7px 0 #2c2c2c";
			}
		}
	}
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章