代码实例:
<!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
时间: 2024-10-21 23:27:53