QQ音乐播放器构建详解-优快云博客

本文链接：https://blog.youkuaiyun.com/NoodleDD/article/details/107039735

本文详细记录了QQ音乐播放器的构建过程，包括基本结构分析和代码实现。从整体布局到各个部分的详细设计，如头部、中部内容区工具条、歌曲列表信息区、自定义滚动条、歌曲信息区域和底部控制结构。使用了HTML、CSS以及jQuery来完成各项功能，特别是通过jQuery custom content scroller插件实现了自定义滚动条。

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

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="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;
}