音乐导航

音乐导航

科技前沿 • 2025-03-17 13:41 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

html:

<body> <div id="box1"> <ul> <audio></audio> <li><a>首页</a></li> <li><a>编辑</a></li> <li><a>文本</a></li> <li><a>选择</a></li> <li><a>跳转</a></li> <li><a>查找</a></li> <li><a>运行</a></li> <li><a>工具</a></li> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </ul> </div> </body>

讯享网

style:

讯享网

讯享网<style type="text/css"> *{ margin: 0; padding: 0; } #box1{ margin: 200px auto; width: 464px; height: 50px; border: 1px solid; overflow: hidden; } #box1 > ul > li{ list-style: none; float: left; padding:0 10px; font: 18px/48px "微软雅黑"; text-align: center; border: 1px solid; } #box1 > ul > div{ width: 56px; height: 48px; background-color: pink; opacity: 0.9; float: left; margin: 1px; transition: 0.5s; } #box1 > ul > li:hover{ cursor: pointer; } </style>

script:

<script type="text/javascript"> window.onload=function(){ var lis=document.getElementsByTagName("li"); var bgcolors=document.querySelectorAll("#box1 ul div"); var aud=document.querySelector("audio"); var arr=["a","b","c","d","e","f","g","f","e"]; for (let i=0; i<lis.length; i++) { lis[i].onmouseenter=function(){ bgcolors[i].style.transform="translateY(-50px)"; aud.src="http://s8.qhimg.com/share/audio/piano1/"+arr[i]+"4.mp3"; aud.play(); } lis[i].onmouseleave=function(){ bgcolors[i].style.transform="translateY(0px)"; } } } </script>

相关推荐