html5 带声音的导航
代码实例：
<!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 带声音的导航的更多相关文章
- Python+opencv+pyaudio实现带声音屏幕录制
原文链接:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 Python+opencv+pyaudio实现带声音屏幕录制原创luke ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码
导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...
- 导航 - 利用系统自带的App导航
导航: 可以将需要导航位置丢给系统自带的App进行导航 发送网络请求到公司服务器, 获取导航数据, 自己手动绘制导航 利用三方SDK进行导航(百度) #import "ViewControl ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
- JavaCV的摄像头实战之七：推流(带声音)
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<JavaCV的摄像头实战> ...
- audio.js – 随时随地，播放 HTML5 的声音
audio.js是一个HTML5标签的简易包装.但它不仅在支持HTML5的浏览器上能够轻松调用标签,并在不支持HTML5的浏览器上也能通过Flash作为B计划使用.除此之外,audio.js所提供的界 ...
- [翻译]HTML5 - 会话历史和导航
原文为:https://w3c.github.io/html/browsers.html#session-history-and-navigation 一.浏览上下文的会话历史记录 浏 ...
- asp.net 文件上传 Uploadify HTML5 带进度条
参考的https://www.cnblogs.com/lvdabao/p/3452858.html这位,在此基础上略有修改: 1.根据Layer,将上传附件做成弹窗显示,引入frame弹窗,在项目当中 ...
随机推荐
- JS获取各种宽度、高度的简单介绍：
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- POJ 1502 MPI MaeIstrom ( 裸最短路 || atoi系统函数 )
题意 : 给出 N 个点,各个点之间的路径长度用给出的下三角矩阵表示,上上角矩阵和下三角矩阵是一样的,主对角线的元素都是 0 代表自己到达自己不用花费,现在问你从 1 到 N 的最短路,矩阵的 x 代 ...
- 【HDOJ6645】Stay Real（堆）
题意:给定一个n个点的堆,每个点有一个值a[i],每个点必须将在其所有儿子被取之后才能被取 有两个人都按最佳策略行动,问结束之后两人分别取的值之和 n<=1e5,1<=a[i]<=1 ...
- 2、投资之基金 - IT人思维之投资
笔者曾经对基金进行投资,但是当时对基金不是很了解,只是为了投资而去投资.现在,笔者对基金的投资有了更深入的了解认识,所以就有了本文. 基金投资在国内还是挺流行的,虽然其是从国外引进来的概念经验,但是国 ...
- NOIp 数据结构专题总结 (1)：STL、堆、并查集、ST表、Hash表
系列索引: NOIp 数据结构专题总结 (1) NOIp 数据结构专题总结 (2) STL structure STL 在 OI 中的运用:https://oi.men.ci/stl-in-oi/ s ...
- MySQL工作中遇到的问题记录
1:log_slave_updates: 从库1搭建级联从库2,从库1需要开启log_slave_updates,修改/etc/my.cnf,增加一行log_slave_updates=1,重启数据库 ...
- delphi idhttpserver 服务器
[冒泡]lazarus(964489899) 10:01:27 哥 能复制成 字符串吗? [冒泡]lazarus(964489899) 10:01:44 我想快速输入一下 [传说]CHINY( ...
- hexo博客yilia主题深度设置
转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...
- ajax基础--基本概念
1.Ajax的全称: Asynchronous Javascript And XML,就是使用is代码获取服务器数据 局部异步刷新 IP地址:用来标识查找某一台计算机 域名:ip地址太难记了,使用域名 ...
- 机器学习 coursera_ML
在开始看之前,浏览器一直出现缓冲问题,是配置文件设置的不对,最后搞定,高兴!解决方法如下: 1.到C:\Windows\System32\drivers\etc下找到host文件,并以文本方式打开, ...