<style>
nav {
margin: 50px auto;
width: 800px;
cursor: pointer;
}
ul {
overflow: hidden;
margin: auto;
}
li {
list-style: none;
width: 90px;
position: relative;
display: inline-block;
}
ul li a {
position: relative;
color: #333;
text-decoration: none;
text-align: center;
line-height: 70px;
font-size: 14px;
display: block;
z-index: 100;
/*background: #9c0;*/
}
li::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
top: 66px;
transition: .4s all ease-in-out;
z-index: 1;
background: pink;
}
li.on::after {
top: 0;
left: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a>哆</a></li>
<li><a>唻</a></li>
<li><a>咪</a></li>
<li><a>发</a></li>
<li><a>嗦</a></li>
<li><a>啦</a></li>
<li><a>嘻</a></li>
<li><a>多~</a></li>
</ul>
<audio></audio>
</nav>
</body>找到每个音符音频保存本地,把后缀改为ogg格式
<script>
$(function () {
$('ul li').mouseover(function () {
$(this).addClass('on')
});
$('ul li').mouseout(function () {
$(this).removeClass('on')
});
})
$(function(){
$(" ul li").hover(function(){
$(this).animate({"backgroundColor":"pink",transition:"all .3s ease"})
var index=$(this).index();
$("audio")[0].src=`./mp3/${index+1}.ogg`;
$("audio")[0].play();
},function(){
$("ul li").css("backgroundColor","skyblue")
});
})
</script>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
