360 音乐导航 trigger audio 等知识点

最新推荐文章于 2019-12-29 16:10:17 发布

liu709127859

最新推荐文章于 2019-12-29 16:10:17 发布

阅读量383

点赞数

html 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
nav{
width: 800px;
height: 40px;
margin:100px auto;
border:1px solid #ccc;
}
nav li{
float: left;
width: 99px;
height: 40px;
border-right:1px solid #ccc;
position: relative;
text-align: center;
line-height: 40px;
cursor: pointer;
}
nav .last{
border-right: 0 none;
}
nav li ins{
width: 99px;
height: 40px;
position: absolute;
left: 0;
top: 40px;
background: pink;
z-index: -1;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<nav>
<ul>
<li>
新闻头条
</li>

<li>电视剧</li>
<li>最新电影</li>
<li>小游戏</li>
<li>小说大全</li>
<li>旅游购物</li>
<li>网上购物</li>
<li class="last">今日团购</li>
</ul>

</nav>

<audio src="music/a1.mp3"></audio>
<audio src="music/a2.mp3"></audio>
<audio src="music/a3.mp3"></audio>
<audio src="music/a4.mp3"></audio>
<audio src="music/a5.mp3"></audio>
<audio src="music/a6.mp3"></audio>
<audio src="music/a7.mp3"></audio>
<audio src="music/a8.mp3"></audio>
<script>
$(document).ready(function(e) {
//创建标签
var ta=$("<ins></ins>");
//追加标签
$("li").append(ta);
//定义颜色数组
var colorBox=["pink","lightgreen","lightblue","orange","purple","#123","orange","#def"];
// each 遍历背景色
$("ins").each(function(index, element) {
$(element).css({"background-color":colorBox[index]});
});
// li 事件中添加动画
$("li").hover(function(){
$(this).children("ins").stop().animate({"top":"0px"});
//加载音乐
$("audio").get($(this).index()).load();
//播放音乐
$("audio").get($(this).index()).play();
},function(){
$(this).children("ins").stop().animate({"top":"40px"});
});
//数字键控制相应的音符
$(window).keydown(function(e){
console.log(e.keyCode);
if(e.keyCode>95 && e.keyCode<104){
//console.log("real");

var num=e.keyCode-96;
console.log("num is"+num);
//index获取到索引好 eq 获取到对象
//console.log($("li").index());
//console.log($("li").eq(num));
$('li').eq(num).trigger('mouseover');
setTimeout(function(){
$('li').eq(num).trigger("mouseout");
},500);
}
});
});
</script>
</body>
</html>