这是一款基于jQuery模拟模拟音乐导航菜单,在代码中引入mp3文件就可以点击导航栏进行播放,操作非常简单,没有太多的CSS和JS样式,比较有个性的一款代码。
使用方法
在页面中引入中jquery.min.js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"> $(function(){ $('ul li').last().css('border','none'); var ins = $('<ins></ins>'); $('ul li').append(ins); var colorArr = ['red','green','blue','yellow','pink','orange','purple','yellowgreen']; $('ul li ins').each(function(index, el) { $(this).css('background-color',colorArr[index]); }); $('ul li').hover(function() { var index = $(this).index(); $(this).children('ins').stop().animate({'top':25},500); $('audio').get(index).load(); $('audio').get(index).play(); }, function() { $(this).children('ins').stop().animate({'top':40},500); }); }) </script>
Html结构
在页面引入需要用到的html代码
<ul> <li>首页</li> <li>网页</li> <li>新闻</li> <li>音乐</li> <li>图片</li> <li>视频</li> <li>地图</li> <li>我们</li> </ul> <div class="musicWrap"> <audio src="music/a1.mp3"></audio> <audio src="music/a2.mp3"></audio> <audio src="music/a3.mp3"></audio> <audio src="music/a4.mp3"></audio> <audio src="music/a5.mp3"></audio> <audio src="music/a6.mp3"></audio> <audio src="music/a7.mp3"></audio> <audio src="music/a8.mp3"></audio> </div>