10.8 360首页的音乐导航
图片.png
js代码 :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360音乐导航</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box
{
width:900px;
height: 40px;
border: 1px solid #dddddd;
margin: 100px auto;
overflow: hidden;
}
#oUl
{
width: 910px;
margin-left: -4px;
}
#oUl li
{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background:url("images/_r1_c1.png") no-repeat 0 0;
border-right:1px dashed #cccccc;
position: relative;
}
#oUl li a
{
text-decoration: none;
font-size: 13px;
color: #000;
}
span
{
width: 100px;
height: 40px;
background: deepskyblue;
position: absolute;
left: 0;
top: 40px;
z-index: -1;
}
</style>
</head>
<body>
<div id="box">
<ul id="oUl">
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a1.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a2.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a3.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a4.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a5.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a6.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a7.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a8.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a9.mp3"></audio>
</li>
</ul>
</div>
</body>
<script src="js/MyFunc1.js"></script>
<script>
function $(symId) {
return document.getElementById(symId);
}
window.onload = function () {
//var lis = $('oUl').document.getElementsByName('li');
//var oSpan = lis.children[1];
var oUl = $('oUl');
var lis = oUl.children;
//当li 被over 的时候
for (var i = 0; i < lis.length; i++) {
//给 li 里面的精灵图 定位添加进来
if (i==0) {
lis[i].style.backgroundPosition = '0 0';
}
else{
lis[i].style.backgroundPosition = '0' + i * (-40)+'px';
}
//当li 被over的时候 它 的第二个孩子动画显示
lis[i].onmouseover = function () {
// alert(0);
//for (var i = 0; i < lis.length; i++) {
//lis[i].children[1].style.top = 40;
// }
//this.children[1].style.top =0;
buffer(this.children[1],{top:0}, function () {//音乐是不同的事件源 所以不同放这里
// buffer(lis[this.index - 1].children[1],{top:40})//这里不能搞连续触发的动画效果
//因为不是同一个事件
});
this.children[2].play();
//最后发现 的问题 我们应该让下一次播放音乐从0开始
this.children[2].currentTime = 0;
};
//当鼠标离开的时候当前的li 的 第二个孩子动画消失
lis[i].onmouseout = function () {
buffer(this.children[1],{top:40})
}
};
//当点击键盘的时候 发生的事件
document.onkeydown = function (event) {
var event = event ||window.event;
// console.log(event.onkeydown);
console.log(event.keyCode);
//首先 keyCode(标准的键码表)是没有0的.从1 - 9 分别对应的是49 - 57.
// 但是现在我们需求获取的是0 开始 . 也就是说 keyCode = 48;所以标准键码表keyCode减去对应的值既 最小的值 49 就等于0 l
// 键盘上的 1 数字对应的是49
//就是说 从0 - 9 ,对应的是48 - 57
//那么现在的keyCode 指的就是myCode
var myCode = event.keyCode - 49; //这样第一个就是从 0 开始
//keyCode 获取得到的是数字 所以当点击 0 -9 的时候 让对应的li触发事件就可以
//让ospan显示动起来这里也还是跟手动的效果一样,所以用缓动动画
buffer(lis[myCode].children[1],{top:0}, function () {
buffer(lis[myCode].children[1],{top:40});//这里就可以用连续触发的动画 ,因为每点击键盘触发的同时也离开
});
//让音乐同时响起
lis[myCode].children[2].play();
//最后发现 的问题 我们应该让下一次播放音乐从0开始
this.children[2].currentTime = 0;
}
}
</script>
</html>
