jQuery——QQ音乐案例

最新推荐文章于 2022-08-12 21:40:13 发布

yyang_233

最新推荐文章于 2022-08-12 21:40:13 发布

阅读量2k

点赞数 3

分类专栏： jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/qq_41217480/article/details/107978270

版权

该博客详细介绍了如何使用jQuery实现一个QQ音乐播放器，包括结构布局、样式设计、事件处理和优化。主要内容涉及歌曲列表加载、播放控制、进度条同步、声音控制、歌词同步等。代码实例可在GitHub上查看。

摘要由CSDN通过智能技术生成

代码见 https://github.com/minmin233/QQmusic–jQuery

结构

头部

在这里插入图片描述

<div class="header">
	<h1 class="logo"><a href="#"></a></h1>
	<ul class="login">
		<li>登录</li>
		<li>设置</li>
	</ul>
</div>

.header{
   
	width: 100%;
	height: 45px;
	background: #31c27c;
}
.header .logo{
   
	float: left;
	margin-left: 20px;
}
.header .logo a{
   
	display: inline-block;
	width: 78px;
	height: 21px;
	background: url("../images/logo.png") no-repeat;
}
.header .login{
   
	float: right;
	line-height: 45px;
}
.header .login li{
   
	list-style: none;
	float: left;
	margin-right:20px;
	color:#fff;
}

中间内容区

在这里插入图片描述

中间内容区可以划分为一左一右
左边可以分为一上一下
1.上面是五个按钮，按钮中有边框，有图片，有文字
2.下面是歌曲列表，歌曲列表的歌曲可以选中，鼠标悬停的时候会显示子菜单
2.1复选框选中的√是个图片，设置这个图片的位置，弄一个类添加移除
2.2禁用li的选中事件
2.3超出出现滚动条，优化滚动条，用插件，有引入顺序问题
右边可以分为一上一下
1.上面是歌曲基本信息
2.下面是歌词展示
在这里插入图片描述

<div class="content_toolbar">
	<span><i></i>收藏</span>
	<span><i></i>添加到</span>
	<span><i></i>下载</span>
	<span><i></i>删除</span>
	<span><i></i>清空列表</span>
</div>

<div class="content_list" data-mcs-theme="minimal-dark">
	<ul>
		<li class="list_title">
			<div class="list_check"><i></i></div>
			<div class="list_number"></div>
			<div class="list_name">歌曲</div>
			<div class="list_singer">歌手</div>
			<div class="list_time">时长</div>
		</li>
	</ul>
</div>

<li class="list_music">
	<div class="list_check"><i></i></div>
	<div class="list_number">1</div>
	<div class="list_name">从零玩转编程开发
		<div class="list_menu">
			<a href="javascript:;" title="播放"></a>
			<a href="javascript:;" title="添加"></a>
			<a href="javascript:;" title="下载"></a>
			<a href="javascript:;" title="分享"></a>
		</div>
	</div>
	<div class="list_singer">李南江</div>
	<div class="list_time">
		<span>04:18</span>
		<a href="javascript:;" title="删除"></a>
	</div>
</li>

<div class="song_info">
	<a href="javascript:;" class="song_info_pic">
		<img src="../images/lnj.jpg" alt="">
	</a>
	<div class="song_info_name">歌曲名称：
		<a href="javascript:;">从零玩转编程开发</a>
	</div>
	<div class="song_info_singer">歌手名：
		<a href="javascript:;">李南江</a>
	</div>
	<div class="song_info_ablum">专辑名：
		<a href="javascript:;">从零玩转系列</a>
	</div>
</div>

<div class="song_lyric_container">
	<ul class="song_lyric">
		<li>1</li>
		<li>2</li>
	</ul>
</div>

/*精灵图*/
.content_toolbar span i{
   
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("../images/icon_sprite.png") no-repeat 0 0;
	margin-right: 10px;
	vertical-align: -5px;
}
.content_toolbar span:nth-child(1) i{
   
	background-position: -60px -20px;
}
.content_toolbar span:nth-child(2) i{
   
	background-position: -20px -20px;
}
.content_toolbar span:nth-child(3) i{
   
	background-position: -40px -240px;
}
.content_toolbar span:nth-child(4) i{
   
	background-position: -100px -20px;
}
.content_toolbar span:nth-child(5) i{
   
	background-position: -40px -300px;
}
/*滚动条*/
.content_left .content_list{
   
	width: 100%;
	height: 420px;
	overflow: auto;/*超出出现滚动条*/
}
/*每条歌曲*/
.content_list li{
   
	list-style: none;
	width: 100%;
	height: 50px;
	background: orange;
	opacity: 0.5;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	box-sizing: border-box;
	user-select: none; /*禁用选中*/
}

底部控制区

在这里插入图片描述

进度条由三个部分组成，乳白色的背景，纯白色的前景，小圆点；
声音控制区由一个图标和一个进度条组成；
图标对齐方式；
控制图标的切换，播放按钮，循环模式按钮，喜欢按钮，纯净模式按钮
在这里插入图片描述

<!-- 进度条 -->
<div class="music_progress_info">
	<div class="music_progress_top">
		<span class="music_progress_name">从零玩转编程开发 / 李江南</span>
		<span class="music_progress_time">00:00 / 05:23</span>
	</div>
	<div class="music_progress_bar">
		<div class="music_progress_line">
			<div class="music_progress_dot">