jQuery 实现音乐导航案例

最新推荐文章于 2022-01-28 00:02:13 发布

原创最新推荐文章于 2022-01-28 00:02:13 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery实现音乐导航案例

JQuery 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript实现的响应式导航栏，当鼠标悬停在导航项上时，会触发背景变化及播放对应的音频文件。示例中使用了Ogg格式的音频文件，并在火狐浏览器中进行了测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码：

<!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.3.1.js"></script>
		<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格式的音乐，在火狐浏览器能够播放，你可以使用其他格式音乐素材
效果图：
在这里插入图片描述
鼠标悬停音乐效果，播放音乐