投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 菜单导航 / 基于jQuery会唱歌的音乐导航特效代码
 基于jQuery会唱歌的音乐导航特效代码
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-04-30
    阅读:

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

简要教程

这是一款基于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>