码迷,mamicode.com
首页 > Web开发 > 详细

html5 带声音的导航

时间:2017-09-03 22:16:42      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:字符   name   获取   编辑   size   on()   cccccc   htm   center   

代码实例:

<!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 带声音的导航

标签:字符   name   获取   编辑   size   on()   cccccc   htm   center   

原文地址:http://www.cnblogs.com/guangzhou11/p/7470996.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!