代码实例：

<!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. redis学习 --Hash

    一:我们可以将Redis中的Hash类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Age等.如果H ...

  2. [luogu]P1016 旅行家的预算[贪心]

    [luogu]P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能 ...

  3. H700关闭Direct PD Mapping

    Attached Enclosure doesn't support in controller's Direct mapping modePlease contact your system sup ...

  4. 第九届ECNU Coder F.蚂蚁（栈）

    题目链接:http://acm.ecnu.edu.cn/contest/16/problem/F/ 题目: F. 蚂蚁 Time limit per test: 0.5 seconds Time li ...

  5. DG-V$MANAGED_STANDBY视图

    V$MANAGED_STANDBY displays current status information for some Oracle Database processes related to ...

  6. Python web自动化测试框架搭建(功能&接口)——unittest介绍

    Python UnitTest测试框架介绍 1)         TestCase:所有测试用例类继承的基本类, TestCase的实例就是测试用例 2)         TestSuite:测试套件 ...

  7. 彻底理解 Linux 的搜索工具： grep 和 awk

    grep 官方手册 awk 官方手册, awk 学习资料 1. grep grep 用于打印匹配指定模式的行. 1.1 介绍 grep 命令从输入文件中查找匹配到给定模式列表的行.发现匹配到的行后,默 ...

  8. poj2376Cleaning Shifts (贪心求解)

    描述 大表哥分配 N (1 <= N <= 25,000) 只中的一些奶牛在牛棚附近做些清洁. 他总是要让至少一只牛做清洁.他把一天分成T段(1 <= T <= 1,000,0 ...

  9. Go-Mutex互斥量

    先来看一段go1.12.5中Mutex的源码: // Copyright 2009 The Go Authors. All rights reserved. // Use of this source ...

  10. JS获取当前时间并格式化

    1.获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”      function p(s) {        return s < 10 ? '0' + s : s;     ...