代码实例：

<!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. leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和]

    题目链接 Given a m x n matrix mat and an integer threshold. Return the maximum side-length of a square w ...

  2. 用树状数组写的最长上升子序列（友好城市），nlogn。

    #include<iostream> #include<algorithm> #define maxn 100000 #define lb(x) x&-x using ...

  3. Oracle 中 not exists (select 'X' ...) 的含义

    select a.col1,a.col2 from temp1 a where not exists (select 'X' from temp2 b where b.col2 = a.col1);s ...

  4. 基于ES6的tinyJquery

    原文地址:Bougie的博客 jQuery作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落.但它操作DOM的便利性无出其右.我用ES6写了一个基于class简化版的jQuery,包 ...

  5. iOS应用发布打包时为什么选择release，而不是debug

    一.Debug和Release版本区别? 众所周知,我们进行iOS开发,在Xcode调试程序时,分为两种方式,Debug和Release,在Target的Setting中相信大家应该看到很多选项都分为 ...

  6. C#-概念-基础类库：基础类库

    ylbtech-C#-概念-基础类库:基础类库 基础类库 (BCL) 是微软所提出的一组标准库可提供.NET Framework所有语言使用. 随着 Windows 以及 .NET Framework ...

  7. docker 配置sonatype/nexus3

    docker search nexusdocker pull sonatype/nexus3mkdir -p /dockermaven/nexus-datachmod -R 777 /dockerma ...

  8. php面向对象三大特性

    1.封装: 目的:使类更加安全 步骤:1.成员变量变成private(私有的)2.设置方法/调用方法3.在方法中增加限制 <?php class shao { private $aa;//必须是 ...

  9. 怎样用idhttpserver代替IIS让用户浏览html或下载文件 http://bbs.csdn.net/topics/360248674

      怎样用idhttpserver代替IIS让用户浏览html或下载文件 更多0分享到: 相关知识库: C# 虚拟现实(VR) Node.js 算法与数据结构     对我有用[0] 丢个板砖[0]  ...

  10. 2019/11/09 TZOJ

    1001 Interesting Integers http://www.tzcoder.cn/acmhome/problemdetail.do?&method=showdetail& ...