JQuery实现音乐导航栏的简单实现

实现代码如下所示：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.nav {width: 900px;height: 60px;background-color: black;margin: 0 auto;}.nav li {width: 100px;height: 60px;/*border: 1px solid yellow;*/float: left;position: relative;overflow: hidden;}.nav a {position: absolute;width: 100%;height: 100%;font-size: 24px;color: blue;text-align: center;line-height: 60px;text-decoration: none;z-index: 2;}.nav span {position: absolute;width: 100%;height: 100%;background-color: yellow;top: 60px;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">导航1</a><span></span></li><li><a href="#">导航2</a><span></span></li><li><a href="#">导航3</a><span></span></li><li><a href="#">导航4</a><span></span></li><li><a href="#">导航5</a><span></span></li><li><a href="#">导航6</a><span></span></li><li><a href="#">导航7</a><span></span></li><li><a href="#">导航8</a><span></span></li><li><a href="#">导航9</a><span></span></li></ul><!--音频标签--><div><audio src="mp3/1.ogg"></audio><audio src="mp3/2.ogg"></audio><audio src="mp3/3.ogg"></audio><audio src="mp3/4.ogg"></audio><audio src="mp3/5.ogg"></audio><audio src="mp3/6.ogg"></audio><audio src="mp3/7.ogg"></audio><audio src="mp3/8.ogg"></audio><audio src="mp3/9.ogg"></audio></div></div><script src="js/jquery-3.4.1.js"></script>       <!--导入JQuery文件--><script>$(function () {$(".nav li").mouseenter(function(){$(this).children("span").stop().animate({top:0});var index=$(this).index();//音乐播放的方法时DOM对象的，jq未对音乐视频进行封装$("audio").get(index).load();$("audio").get(index).play();}).mouseleave(function(){$(this).children("span").stop().animate({top:60});});});</script></body>
</html>

注：我在这里使用的是Ogg格式的音乐，在火狐浏览器能够播放，你可以使用其他格式音乐素材
效果图：

鼠标悬停音乐效果，播放音乐

JQuery实现音乐导航栏的简单实现相关推荐

项目总结3 类似网易云音乐导航栏指示器(个性推荐、歌单等)的简单实现(一)
我们先来看看网易云音乐导航栏指示器是什么样的. 箭头指向的蓝色框就是导航指示器,点击之后下面的view会跟着移动,每个button下面还有个小红线跟着.这个效果其实不难实现,我们先来分析分析. 在iO ...
jQuery Mobile中导航栏navbar的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中导航栏navbar的data-*选项 //带有 data-role="nav ...
Android 底部导航栏-极致简单版
底部导航栏是常用的一个工具,大多数的APP都带有底部导航栏,底部导航栏可以方便用户一只手操作,切占用内存比常规的Activity少,底部导航栏使用Fragment+RadioGroup方法来实现,示意 ...
Jquery Mobile 画面导航栏共用的实现方法
2019独角兽企业重金招聘Python工程师标准>>> gulp中使用 gulp-file-include 可以使html中包含其他的文件内容, 避免重复多次写网页上相同的部分,将来 ...
导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
jQuery 实现音乐导航案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
jQuery水平滑动导航栏
html代码 <div class="header"><ul class="menu"><li class="first ...
基于Bootstrap、Jquery的自适应导航栏
css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...
CSS学习案例（16）：网易云音乐导航栏
网易云音乐官网点这里原版: 自己做的: 网易云logo图标和搜索放大镜图标在阿里巴巴矢量图标库找 <div class="container"><div cl ...

JQuery实现音乐导航栏的简单实现

JQuery实现音乐导航栏的简单实现相关推荐

最新文章

热门文章