代码实例：

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

效果：

、

编辑的文件

2017-09-03 20:44:37

html5 带声音的导航的更多相关文章

  1. Python+opencv+pyaudio实现带声音屏幕录制

    原文链接:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 Python+opencv+pyaudio实现带声音屏幕录制原创luke ...

  2. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  3. HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

  4. 导航 - 利用系统自带的App导航

    导航: 可以将需要导航位置丢给系统自带的App进行导航 发送网络请求到公司服务器, 获取导航数据, 自己手动绘制导航 利用三方SDK进行导航(百度) #import "ViewControl ...

  5. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  6. JavaCV的摄像头实战之七：推流(带声音)

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<JavaCV的摄像头实战> ...

  7. audio.js – 随时随地，播放 HTML5 的声音

    audio.js是一个HTML5标签的简易包装.但它不仅在支持HTML5的浏览器上能够轻松调用标签,并在不支持HTML5的浏览器上也能通过Flash作为B计划使用.除此之外,audio.js所提供的界 ...

  8. [翻译]HTML5 - 会话历史和导航

            原文为:https://w3c.github.io/html/browsers.html#session-history-and-navigation 一.浏览上下文的会话历史记录 浏 ...

  9. asp.net 文件上传 Uploadify HTML5 带进度条

    参考的https://www.cnblogs.com/lvdabao/p/3452858.html这位,在此基础上略有修改: 1.根据Layer,将上传附件做成弹窗显示,引入frame弹窗,在项目当中 ...

随机推荐

  1. Page.after

    解释: Page.after可以增加Page级的切面,触发的时机是在所拦截的对应生命周期方法执行之后,也可以拦截所有页面上发生的事件(对于要拦截的事件,在swan文件上必须显示绑定了相应事件). 方法 ...

  2. PHP中什么是数组

    PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型. 此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实现),字典,集 ...

  3. sqlserver库相关-表相关-3

    原文: https://www.cnblogs.com/wlx520/p/4684441.html 库相关 建库 --创建School数据库之前:首先判断数据库是否存在,若存在则删除后再创建,若不存在 ...

  4. yii2框架的安装&配置启动

    top:环境MacBook 1.通过composer 安装yii2 [yii2需要php的PDO和pdo_mysql扩展,需要确认已安装] a. 首先需要配置composer:我使用的是阿里云的镜像: ...

  5. p5339 [TJOI2019]唱、跳、rap和篮球

    分析  代码 #include<bits/stdc++.h> using namespace std; #define int long long ; ; ],inv[],G,cc[][] ...

  6. PowerShell 字符串操作--转载

    格式化操作符 –F 在PowerShell文本操作符中非常重要,经常被用来增强数字类型和日期类型的可读性: "{0} diskettes per CD" -f (720mb/1.4 ...

  7. MIME TYPE是什么？

    首先,我们要了解浏览器是如何处理内容的.在浏览器中显示的内容有 HTML.有 XML.有 GIF.还有 Flash ……那么,浏览器是如何区分它们,决定什么内容用什么形式来显示呢?答案是 MIME T ...

  8. ElasticSearch删除索引

    curl -X DELETE http://{ES IP address}:9200/{index_name}

  9. websocket初体验

    (function (window) { var wsUri = "ws://echo.websocket.org:9150"; var output; MyWebSocket = ...

  10. MySQL 导入导出 CSV 文件

    导入 导出 清空表中的所有数据 注意事项 常见问题 ERROR 1290 (HY000): The MySQL server is running with the --secure-file-pri ...