<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<style>
*{margin:0;padding: 0;list-style: none;border:0;}
a{text-decoration: none;color:
#000;}
#nav{width: 900px;height: 40px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
#nav ul{width: 910px;}
#nav ul li{float: left;width: 100px;line-height: 40px;text-align: center;
background: url(
"images/_r1_c1.png"
) no-repeat 0 0 ;border-right: 1px dashed
#ccc;position: relative;}
#nav ul li a{width: 100%;height: 100%;display: inline-block;}
span{width: 100px;height: 40px;background-color: skyblue;position: absolute;left: 0;top: 40px;z-index: -1;}
</style>
</head>
<body>
<nav id=
"nav"
>
<ul id=
"ul"
>
<li><a href=
""
>首页</a><span></span><audio src=
" rel="
external nofollow
" source/a1.mp3"
></audio></li>
<li><a href=
""
>新头条</a><span></span><audio src=
" rel="
external nofollow
" source/a2.mp3"
></audio></li>
<li><a href=
""
>电视剧</a><span></span><audio src=
" rel="
external nofollow
" source/a3.mp3"
></audio></li>
<li><a href=
""
>新电影</a><span></span><audio src=
" rel="
external nofollow
" source/a4.mp3"
></audio></li>
<li><a href=
""
>小游戏</a><span></span><audio src=
" rel="
external nofollow
" source/a5.mp3"
></audio></li>
<li><a href=
""
>小说汇</a><span></span><audio src=
" rel="
external nofollow
" source/a6.mp3"
></audio></li>
<li><a href=
""
>旅游假</a><span></span><audio src=
" rel="
external nofollow
" source/a7.mp3"
></audio></li>
<li><a href=
""
>正品购</a><span></span><audio src=
" rel="
external nofollow
" source/a8.mp3"
></audio></li>
<li><a href=
""
>今日团</a><span></span><audio src=
" rel="
external nofollow
" source/a9.mp3"
></audio></li>
</ul>
</nav>
<script src=
"../00MyTools/MyTools.js"
></script>
<script>
window.addEventListener(
'load'
,
function
(ev) {
var
ul = myTool.$(
'ul'
);
var
allLis = ul.children;
for
(
var
i = 0; i < allLis.length; i++) {
allLis[i].style.backgroundPositionY = (i * -40) +
'px'
;
allLis[i].addEventListener(
'mouseover'
,
function
() {
myTool.slowMoving(
this
.children[1], {
"top"
: 0});
this
.children[2].play();
this
.children[2].currentTime = 0;
});
allLis[i].addEventListener(
'mouseout'
,
function
() {
myTool.slowMoving(
this
.children[1], {
"top"
: 40});
});
}
});
</script>
</body>
</html>