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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章