html5 带声音的导航
2024-08-30 19:51:57
代码实例:
<!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
最新文章
- jquery删除数组中重复元素
- Install the Maven in your computer
- Intellij IDEA中使用Struts2
- Ubuntu下安装Apache mysql php的命令
- Android_SystemService
- C++ const修饰函数、函数参数、函数返回值
- 函数式编程很难,这正是你要学习它的原因 | 外刊IT评论网
- 如何在sublime中使用sass
- Semaphore简介
- 【原创】Arduino入门基础知识总结
- 【4-1】js函数、事件、补充知识
- PostgreSQL代码分析,查询优化部分,canonicalize_qual
- 性能测试-Gatling(一)
- Solaris11 Vsphere client tool 的鼠标问题
- code EINTEGRITY,npm安装时候报错
- EF Core中Key属性相同的实体只能被跟踪(track)一次
- 在iOS中如何正确的实现行间距与行高
- Filter责任链模式
- Mac中Mysql开启远程访问(不同于linux直接改配置文件)
- springboot13 Hikari 和Introspector