html5 带声音的导航

最新推荐文章于 2025-09-10 10:09:14 发布

转载最新推荐文章于 2025-09-10 10:09:14 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guangzhou11/p/7470996.html

文章标签：

#xhtml

本文介绍了一个使用HTML和JavaScript创建的简单网页示例。该示例通过鼠标悬停事件来触发不同列表项对应的音频播放功能，展示了基本的网页布局及简单的DOM操作。

代码实例：

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>无标题文档</title>
    <style>
        *{ margin:0; padding:0;}
        #ul1{ width:1000px; height:30px;}
        #ul1 li{
            list-style:none;
            width:100px;
            height:30px;
            background: #cccccc;
            color:white; border:1px #000 solid;
            float:left;
            line-height:30px;
            text-align:center;
        }
    </style>
    <script>

        window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            var oA = document.getElementById('a1');
            for(var  i=0;i<aLi.length;i++){
                aLi[i].onmouseover= function(){
                    //this.getAttribute('au');
                    //字符串拼接的方式，获取不同的地址
                    oA.src = this.getAttribute('au')+'.mp3';
                    //播放
                    oA.play();
                };
            }
        };
    </script>
</head>
<body>
<ul id="ul1">
    <li au="A" background="blue" >首页</li>
    <li au="B">视频</li>
    <li au="C">课程</li>
    <li au="D">职业</li>
    <li au="E">企业</li>
    <li au="F">社区</li>
    <li au="G">会员</li>
</ul>
<audio id="a1"></audio>
</body>
</html>