基于jQuery会唱歌的音乐导航特效代码

基于jQuery会唱歌的音乐导航特效代码

这是一款基于jQuery模拟模拟音乐导航菜单,在代码中引入mp3文件就可以点击导航栏进行播放,操作非常简单,没有太多的CSS和JS样式,比较有个性的一款代码。

使用方法
在页面中引入中jquery.min.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

文件信息:

    0

    发表评论