音乐导航栏(鼠标移入便播放音乐)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        ul{width: 800px;height: 35px;border: 1px solid #ccc;margin:50px auto;overflow: hidden;}
        ul li{width: 99px;height: 35px;float: left;border-right: 1px dashed #ccc;text-align: center;line-height: 35px;position: relative;}
        ul li span{position: absolute;top:35px;left:0;width: 99px;height: 35px;background: red;z-index: -1;}
    </style>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
         $(function(){
            $("ul li:last").css("border-right","none");
            $("ul li").append('<span></span>');
            var colorArr = ["red","green","blue","pink","orange","yellow","yellowgreen","gold"];
            $("ul li span").each(function(index){
                 $(this).css("background-color",colorArr[index]);
            });
            $("ul li").hover(function(){
                var num = $(this).index();
                $(this).children('span').stop().animate({top:0},500);//往上走35pox
                $("audio").attr("src","music/"+num+".ogg");

            },function(){
                $(this).children('span').stop().animate({top:"35px"},500);
            });

            $(window).keydown(function(e) {
                var key = 0;
                console.log(e.keyCode);//获得键盘键码的
                //需求:我们只想按1-8之间才播放音乐;
                if(e.keyCode >= 49 && e.keyCode <= 56){
                    key = e.keyCode - 49;//49-49 =0 50-49 =1
                    $("audio").attr("src","music/"+key+".ogg");
                    $("ul li").eq(key).children('span').stop().animate({top:0},500).animate({top:"35px"}, 500);//往上走35pox
                }
            });
         })
    </script>
</head>
<body>
    <ul>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
    </ul>
    <audio autoplay></audio>
    <audio autoplay></audio>
    <audio autoplay></audio>
    <audio autoplay></audio>
    <audio autoplay></audio>
    <audio autoplay></audio>
    <audio autoplay></audio>
    <audio autoplay></audio>
</body>
</html>





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值