js键盘钢琴演奏特效代码下载


js键盘钢琴演奏特效代码下载
js键盘钢琴演奏特效代码下载以及键盘钢琴演奏等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/myFun.js" type="text/javascript" charset="utf-8"></script>

2. HTML代码

		<div id="box">
			<div class="btn">开始演奏</div>
			<ul class="ul">
				<li>
					<span></span>
					<a href="#">1</a>
					<audio src="img/w1.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">2</a>
					<audio src="img/w2.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">3</a>
					<audio src="img/w3.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">4</a>
					<audio src="img/w4.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">5</a>
					<audio src="img/w5.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">6</a>
					<audio src="img/w6.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">7</a>
					<audio src="img/w7.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">8</a>
					<audio src="img/w8.ogv"></audio>
				</li>
				<li>
					<span></span>
					<a href="#">9</a>
					<audio src="img/w8.ogv"></audio>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			window.addEventListener('load',function(){
				//获取事件源
				var ul = document.getElementsByClassName('ul')[0];
				var li = document.getElementsByTagName('li');
				var btn = document.getElementsByClassName('btn')[0];
				var body = document.getElementsByTagName('body')[0];
				btn.addEventListener('click',function(){
					body.style.backgroundColor = 'white';
					//鼠标进入事件
					for(var i=0;i<li.length;i++){
						li[i].addEventListener('mouseover',function(){
							animation(this.children[0],{'top':0});
							this.children[2].play();
							this.children[2].currentTime;
						})
					}
					//鼠标离开事件
					for(var j=0;j<li.length;j++){
						li[j].addEventListener('mouseout',function(){
							animation(this.children[0],{'top':50});
						})
					}
					//键盘按下事件
					document.addEventListener('keydown',function(event){
						var e = event || window.event;
						var keyCode = e.keyCode - 49;
						console.log(keyCode)
						animation(li[keyCode].children[0],{'top':0},function(){
							animation(li[keyCode].children[0],{'top':50});
						});
						li[keyCode].children[2].play();
						li[keyCode].children[2].currentTime;
					})
				})
			})
		</script>

相关推荐

发表评论

相关文章