QQ音乐播放器部分笔记

QQ音乐播放器案例

1. 基本结构分析

三个部分:

头部区域
中间内容区
- 左边歌曲列表信息
  - 上边按钮工具条和下边的滑动列表[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qebn5hBX-1593490234092)(C:\Users\HP\Desktop\2.jpg)]
- 右边封面和歌词
底部控制区

2. 代码实现

1. 整体布局及头部

html

<div class="header"><h1 class="logo"><a href="#"></a></h1><ul class="register"><li>登录</li><li>注册</li></ul>
</div>
<div class="content"><div class="content_in"><div class="content_left"></div><div class="content_right"></div></div>
</div>
<div class="footer"><div class="footer_in"></div>
</div>

css

* {margin: 0;padding: 0;
}
.header {width: 100%;height: 45px;background: red;
}
.header .logo {float: left;margin-left: 20px;opacity: 0.5;
}
.header .logo:hover {opacity: 1;
}
.header .logo a {display: inline-block;width: 78px;height: 21px;background: url("../images/player_logo.png") no-repeat 0 0;
}
.header .register {float: right;line-height: 25px;
}
.header .register li {list-style: none;float: left;margin-right: 20px;color: #fff;opacity: 0.5;cursor: pointer;
}
.header .register li:hover {opacity: 1;
}
.content {width: 100%;height: 460px;background: blue;
}
.content .content_in {width: 1200px;height: 100%;background: deeppink;margin: 0 auto;
}
.footer {width: 100%;height: 60px;background: green;position: absolute;bottom: 0;left: 0;
}
.footer .footer_in {width: 1200px;height: 100%;background: plum;margin: 0 auto;
}

2. 中部内容区工具条

工具条使用 span 作为按钮，里边为图片加文字。

html

<div class="content_in"><div class="content_left"><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>
</div>

css

.content .content_in .content_left {float: left;width: 800px;height: 100%;background: pink;
}
.content_left .content_toolbar {width: 100%;height: 40px;background: #000;
}
.content_toolbar span {display: inline-block;width: 122px;height: 100%;line-height: 40px;text-align: center;box-sizing: border-box;border: 1px solid #fff;color: #fff;opacity: 0.5;cursor: pointer;
}
.content_toolbar span:hover {opacity: 1;
}
.content_toolbar span i {display: inline-block;width: 18px;height: 18px;background: url("../images/icon_sprite.png") no-repeat;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;
}

3. 工具条下边歌曲列表信息区

歌曲列表可以视作逐行的列表，第一行为标题，下边为歌曲。

html

<div class="content_list"><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><li class="list_music"><div class="list_check"><i></i></div><div class="list_number">1</div><div class="list_name">告白气球</div><div class="list_singer">周杰伦</div><div class="list_time">03:32</div></li></ul></div>

css

.content_list li{list-style: none;width: 100%;height: 50px;background: orange;border-bottom: 1px solid rgba(255, 255, 255, 0.5);box-sizing: border-box;
}.content_list li div{float: left;color: #fff;line-height: 50px;opacity: 0.5;}.content_list .list_check{width: 50px;height: 100%;background: #000;text-align: center;
}
.content_list .list_check i{display: inline-block;width: 14px;height: 14px;border: 1px solid #fff;
}.content_list .list_number{width: 20px;height: 100%;background: green;
}
.content_list .list_name{width: 50%;height: 100%;background: #ccc;
}
.content_list .list_singer{width: 20%;height: 100%;background:pink;
}

4. 完善播放列表

选择框

伪选择框，使用图片，当被点击时，切换图片
鼠标悬停的图标

使用 a 标签加背景图即可。使用 jQuery 监听鼠标的移入移出事件。

$(function () {// 1. 监听歌曲的移入移出事件$(".list_music").hover(function () {//   显示子菜单$(this).find(".list_menu").stop().fadeIn(100);$(this).find(".list_time a").stop().fadeIn(100);//   隐藏时长$(this).find(".list_time span").stop().fadeOut(100);},function () {//   隐藏子菜单$(this).find(".list_menu").stop().fadeOut(100);$(this).find(".list_time a").stop().fadeOut(100);//   显示时长$(this).find(".list_time span").stop().fadeIn(100);});// 2. 监听复选框的点击事件$(".list_check").click(function () {$(this).toggleClass("list_checked");});
});

5. 自定义滚动条

自定义滚动条使用了一个 jQuery 插件 jQuery custom content scroller。利用这个插件可以轻松设置滚动条样式。

引入 CSS 文件
在 jQuery 下方引入 JS 文件
为需要添加的元素调用 mCustomScrollbar() 方法
```
$(".content_list").mCustomScrollbar();
```

为该元素添加自定义属性 data-mcs-theme="dark"

<div class="content_list" data-mcs-theme='minimal-dark'></div>

小细节（修改其默认样式）

根据图中所示，可以将滚动条的宽度增加。

/* 滚动条 */
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar {width: 8px;
}

6. 歌曲信息区域

html

<div class="content_right"><div class="song_info"><a href="javascript;;" class="song_info_pic"><img src="data:images/lnj.jpg" alt=""></a><div class="song_info_name">歌曲名称:<a href="javascript:;">xiaokang</a></div><div class="song_info_singer">歌手名:<a href="javascript:;">xiaokang</a></div><div class="song_info_ablum">专辑名:<a href="javascript:;">xiaokang</a></div></div><ul class="song_lyric"><li class="cur">第一条歌词</li><li>第二条歌词</li></ul>
</div>

css

.content_right .song_info {text-align: center;color: rgba(255, 255, 255, 0.5);line-height: 30px;
}.song_info .song_info_pic {display: inline-block;background: url("../images/album_cover_player.png") no-repeat 0 0;width: 201px;height: 180px;text-align: left;
}
.song_info_pic img {width: 180px;height: 180px;
}
.song_info div a {text-decoration: none;color: #fff;opacity: 0.5;
}
.song_info div a:hover {opacity: 1;
}
.content_right .song_lyric {background: gray;text-align: center;margin-top: 30px;
}
.content_right .song_lyric li {list-style: none;line-height: 30px;color: rgba(255, 255, 255, 0.5);font-weight: bold;
}
.content_right .song_lyric .cur {color: #31c27c;
}

7. 底部控制结构

控制图标(红色区域前后)

使用 a 标签加背景图即可
歌曲进度条（红色区域）

此区域需包含进度条及歌曲名称、时间等信息。因此使用 div 作为布局一个div解决
音量部分（绿色区域）

此部分包含图标及一个拖动条，因此也使用 div 作为盒子进行布局。

QQ音乐播放器部分笔记相关推荐

Qt+MPlayer音乐播放器开发笔记（二）：交叉编译MPlayer以及部署到开发板播放演示
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/119991329 长期持续带来更多项目与技术分享,咨询请 ...
QQ音乐播放器-jQuery实现
QQ音乐播放器案例展示案例实现的功能静态页面的布局歌曲信息的动态显示鼠标悬停,功能按钮和文字高亮歌曲信息的动态显示歌曲播放进度条显示和动态移动纯净模式的模板设置和歌词写入案例布局 ...
html5卡拉OK音乐播放器,QQ音乐播放器怎么打开卡拉OK模式
QQ音乐播放器怎么打开卡拉OK模式时间:2020-08-05 12:25:56 责任编辑:随便就行 QQ音乐播放器怎么打开卡拉OK模式?QQ音乐播放器是生活中常用的音乐播放器,很多人在使用QQ音乐播 ...
Qt5学习模仿qq音乐播放器样式（2）——点击动画效果+歌词颜色变换展示
拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
从零玩转jQuery之项目开发（QQ音乐播放器）
QQ音乐播放器项目大体效果如下: HTML结构分析: 一.页面布局 1.首先来看下HTML大体结构: <div class="header"></div> ...
qq音乐播放器2014最新版 v10.23.4377 官方版
qq音乐播放器2014最新版 v10.23.4377 官方版软件大小:11MB 软件语言:简体中文软件性质:常用软件软件授权:官方版更新时间:2014-05-06 应用平台:/Win8/Win ...
qq音乐播放器2014最新版 v10.21.4270 官方版
qq音乐播放器2014最新版 v10.21.4270 官方版软件大小:11MB 软件语言:简体中文软件性质:常用软件软件授权:官方版更新时间:2014-03-31 应用平台:/Win8/Win ...
【QQ音乐】QQ音乐播放器超酷使用技巧逐个揭秘
[编者按]QQ音乐播放器凭借QQ强大的人气,目前已经成为许多朋友听歌的首选了,它带给我们无与伦比的快乐音乐体验.QQ音乐播放器的功能是如此的丰富,用户不仅仅是简单的在线听歌,还可以观看MV.收听在线广 ...

QQ音乐播放器部分笔记

QQ音乐播放器案例

1. 基本结构分析

2. 代码实现

1. 整体布局及头部

2. 中部内容区工具条

3. 工具条下边歌曲列表信息区

4. 完善播放列表

5. 自定义滚动条

6. 歌曲信息区域

7. 底部控制结构

控制图标(红色区域前后)

歌曲进度条（红色区域）

音量部分（绿色区域）

QQ音乐播放器部分笔记相关推荐

最新文章

热门文章