音视频实例--音阶导航 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0 ;
        }
        html,body{
            height:100%;
            overflow: hidden;
        }
        a{
            text-decoration: none;
            display: block;
            color: black;
        }
        ul{
            list-style: none;
            width: 908px;
            height: 38px;
            margin:200px auto;
            border:1px solid;
            overflow: hidden;
        }
        li{
            float:left ;
            height: 100%;
            width:100px;
            text-align: center;
            line-height: 38px;
        }
        li:not(:last-child){
            border-right: 1px solid;
        }
       ul>li>div.down{
           height: 100%;
           background: yellow;
           transition: .2s;
       }
        ul>li:hover .down{
            transform: translateY(-38px);
        }
    </style>
</head>
<body>
<div id="box1">
    <audio ></audio>
    <ul class="nav">
        <li data-flag="a">
            <a href="#">我的主页</a>
            <div class="down"></div>
        </li>
        <li data-flag="b">
            <a href="#">新闻头条</a>
            <div class="down"></div>
        </li>
        <li data-flag="c">
            <a href="#">电视剧</a>
            <div class="down"></div>
        </li>
        <li data-flag="d">
            <a href="#">最新电影</a>
            <div class="down"></div>
        </li>
        <li data-flag="e">
            <a href="#">腿长1米8</a>
            <div class="down"></div>
        </li>
        <li data-flag="f">
            <a href="#">小说大全</a>
            <div class="down"></div>
        </li>
        <li data-flag="g">
            <a href="#">旅游攻略</a>
            <div class="down"></div>
        </li>
        <li data-flag="h">
            <a href="#">次品退购</a>
            <div class="down"></div>
        </li>
        <li data-flag="y">
            <a href="#">今日团购</a>
            <div class="down"></div>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    var liNodes=document.querySelectorAll(".nav>li");
    var audio=document.querySelector('audio');
    for(var i=0;i<liNodes.length;i++){
        liNodes[i].addEventListener("mouseenter",function () {
            var flag=this.dataset.flag===undefined?this.dataset.flag:this.getAttribute("data-flag");
            if(flag){
                audio.src='http://s8.qhimg.com/share/audio/piano1/'+flag+'4.mp3';
                audio.play();
            }
        })
    }
</script>

 

posted @ 2020-08-20 21:33  花未眠0619  阅读(193)  评论(0)    收藏  举报