360 音乐导航 trigger audio 等知识点


<!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>
阅读更多

没有更多推荐了,返回首页