音乐导航栏（鼠标移入便播放音乐）

最新推荐文章于 2022-11-23 11:53:40 发布

java_zhaoyanli

最新推荐文章于 2022-11-23 11:53:40 发布

阅读量843

点赞数

分类专栏：响应式文章标签：音乐

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/51492677

版权

响应式专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!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>

java_zhaoyanli

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
音乐导航栏（鼠标移入便播放音乐）

Document *{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;h
复制链接

扫一扫

专栏目录