代码实例：

<!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. 科匠中国深圳java面试笔试题

  2. [CSP-S模拟测试]:折纸（模拟）

    题目描述 小$s$很喜欢折纸.有一天,他得到了一条很长的纸带,他把它从左向右均匀划分为$N$个单位长度,并且在每份的边界处分别标上数字$0\sim n$.然后小$s$开始无聊的折纸,每次他都会选择一个 ...

  3. JQuery触发hover事件无效时使用js原生的触发事件方法

    需求:在开发一个从微信公众号后台管理网页上爬取数据的chrome插件时,有部分页面元素是只显示了部分摘要信息的,需要把鼠标移上去后才能显示全部信息(类似title的弹出显示).这就需要在chrome插 ...

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

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

  5. Linux_Bash常用脚本

    目录 目录 从用户列表中过滤用户名并创建用户 awktrcut 指令的文本处理 tr指令 cut指令 awk指令 备份文件 测试LFTPServer权限设定 开启Httpd 安装Httpd 批量创建用 ...

  6. CYQ.Data 开源数据层框架 官方下载

    CYQData 数据框架 介绍: CYQ.Data 是一款操作数据库用的数据框架:安全稳定.简洁易用.功能强大.性能优越.内置支持多数据库.多语言.RSS.AOP.事务等功能. 使用本框架进行开发,入 ...

  7. memcpy不能复制内存重叠区域，memmove可以拷贝重叠内存

    http://blog.csdn.net/li_ning_/article/details/51418400 下面s和s2指向的内存区域有重叠,memcpy不能正确复制,src赋值给dst时,可能会修 ...

  8. Codeforces 1197 E (dp+sort+二分) (Rust)

    原题链接 2300分 大意 俄罗斯套娃,每个有内容半径in和外围半径out in_i<out_i 如果 in_i >= out_j ,那么j可以放在i内 定义残留空间 = 一列嵌套的套娃 ...

  9. hdu6570Wave (暴力求解)

    Problem Description Avin is studying series. A series is called "wave" if the following co ...

  10. git统计提交次数

    git log --since="Oct 27 9:16:10 2017 +0800"  --pretty=oneline | wc -l