js代碼 :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360音樂導(dǎo)航</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="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a1.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a2.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a3.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a4.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a5.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a6.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a7.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</a>
<span></span>
<audio src="source/a8.mp3"></audio>
</li>
<li>
<a href="#">音樂導(dǎo)航</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;
//當(dāng)li 被over 的時候
for (var i = 0; i < lis.length; i++) {
//給 li 里面的精靈圖 定位添加進(jìn)來
if (i==0) {
lis[i].style.backgroundPosition = '0 0';
}
else{
lis[i].style.backgroundPosition = '0' + i * (-40)+'px';
}
//當(dāng)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})//這里不能搞連續(xù)觸發(fā)的動畫效果
//因為不是同一個事件
});
this.children[2].play();
//最后發(fā)現(xiàn) 的問題 我們應(yīng)該讓下一次播放音樂從0開始
this.children[2].currentTime = 0;
};
//當(dāng)鼠標(biāo)離開的時候當(dāng)前的li 的 第二個孩子動畫消失
lis[i].onmouseout = function () {
buffer(this.children[1],{top:40})
}
};
//當(dāng)點擊鍵盤的時候 發(fā)生的事件
document.onkeydown = function (event) {
var event = event ||window.event;
// console.log(event.onkeydown);
console.log(event.keyCode);
//首先 keyCode(標(biāo)準(zhǔn)的鍵碼表)是沒有0的.從1 - 9 分別對應(yīng)的是49 - 57.
// 但是現(xiàn)在我們需求獲取的是0 開始 . 也就是說 keyCode = 48;所以標(biāo)準(zhǔn)鍵碼表keyCode減去對應(yīng)的值既 最小的值 49 就等于0 l
// 鍵盤上的 1 數(shù)字對應(yīng)的是49
//就是說 從0 - 9 ,對應(yīng)的是48 - 57
//那么現(xiàn)在的keyCode 指的就是myCode
var myCode = event.keyCode - 49; //這樣第一個就是從 0 開始
//keyCode 獲取得到的是數(shù)字 所以當(dāng)點擊 0 -9 的時候 讓對應(yīng)的li觸發(fā)事件就可以
//讓ospan顯示動起來這里也還是跟手動的效果一樣,所以用緩動動畫
buffer(lis[myCode].children[1],{top:0}, function () {
buffer(lis[myCode].children[1],{top:40});//這里就可以用連續(xù)觸發(fā)的動畫 ,因為每點擊鍵盤觸發(fā)的同時也離開
});
//讓音樂同時響起
lis[myCode].children[2].play();
//最后發(fā)現(xiàn) 的問題 我們應(yīng)該讓下一次播放音樂從0開始
this.children[2].currentTime = 0;
}
}
</script>
</html>
