360音乐导航实现代码

最新推荐文章于 2021-06-29 17:41:40 发布

辣姐什么鬼

最新推荐文章于 2021-06-29 17:41:40 发布

阅读量740

点赞数

分类专栏： web前端 html5 移动开发 Java web 文章标签： html5 jQuery CSS 音乐导航

web前端同时被 3 个专栏收录

174 篇文章 7 订阅

订阅专栏

Java web

12 篇文章 0 订阅

订阅专栏

移动开发

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>360音乐导航</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #nav{
            list-style-type: none;
            margin:50px auto 0px;
            width:950px;
            height:38px;
            color:#333;
            font-size:14px;
            overflow: hidden;
        }
        #nav li{
            width:100px;
            float:left;
            line-height:36px;
            text-align:center;
            border-top:1px solid gray;
            border-left:1px solid gray;
            border-bottom:1px solid gray;
            cursor:pointer;
        }
        #nav li:last-child{
            border-right:1px solid gray;
        }
        #nav .liclick{
            border-top: 2px solid green;
            border-bottom:none;
        }
        #nav span{
            width:100%;
            height:38px;
            display:block;
            position:relative;
            z-index:-1;
        }
    </style>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //点击li
            $('#nav li').click(function(e){
               $('.liclick').removeClass('liclick');
                $(this).addClass('liclick');
            });
            //每个li添加一个底色
            var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];
            $('#nav li').append('<span>');
            $('#nav span').each(function(index,element){
               $(this).css('background-color',color[index]);
            });
            //移动到li上的时候颜色升起
            $('#nav li').hover(function(){
                $(this).children('span').animate({'top':-38},200);
                //获得当前li的索引编号
                var index=$(this).index();
                $('audio').get(index).play();//播放第index个音乐
            },function(){
                $(this).children('span').animate({'top':0},200);
            });
        });
    </script>
</head>
<body>
<ul id="nav">
    <li class="liclick">我的主页</li>
    <li>新闻头条</li>
    <li>电视剧</li>
    <li>最新电影</li>
    <li>小游戏</li>
    <li>小说大全</li>
    <li>旅游度假</li>
    <li>网上购物</li>
    <li>好药特惠</li>
</ul>
<audio src="m1.mp3"></audio>
<audio src="m2.mp3"></audio>
<audio src="m3.mp3"></audio>
<audio src="m4.mp3"></audio>
<audio src="m5.mp3"></audio>
<audio src="m6.mp3"></audio>
<audio src="m7.mp3"></audio>
<audio src="m8.mp3"></audio>
<audio src="m9.mp3"></audio>
</body>
</html>

效果如下：