布局结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

顶部布局

1
2
3
4
5
6
7
<div class="header">
<h1 class="logo"><a href="#"></a></h1>
<ul class="register">
<li>登录</li>
<li>设置</li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
font-size: 14px;
}
.header{
width: 100%;
height: 45px;
}
.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;
/*logo*/
background: url("../images/player_logo.png") no-repeat 0 0;
}
.header .register{
float: right;
line-height: 45px;
}

.header .register li{
list-style: none;
float: left;
margin-right: 20px;
color: #fff;
opacity: 0.5;
}
.header .register li:hover{
opacity: 1;
}

内容结构

1
2
3
4
5
6
<div class="content">
<div class="content_in">
<div class="content_left"></div>
<div class="content_right"></div>
</div>
</div>

工具条布局

1
2
3
4
5
6
7
8
9
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.content{
width: 100%;
height: 460px;
}
.content .content_in{
width: 1200px;
height: 100%;
margin: 0 auto;
}
.content_in .content_left{
float: left;
width: 800px;
height: 100%;
}
.content_left .content_toolbar{
width: 100%;
height: 40px;
}
.content_toolbar span{
display: inline-block;
width: 122px;
height: 100%;
line-height: 40px;
text-align: center;
border: 1px solid #fff;
box-sizing: border-box;
border-radius: 5px;
color: #fff;
opacity: 0.5;
}
.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 0 0;
margin-right: 10px;
vertical-align: -5px;
}
/*单独设置每个图片的位置(用PS测试)*/
.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;
}
/***********顶部END************/

播放列表布局

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="content_left">
<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:35</div>
</li>
<!--其下的歌曲列表通过JS动态获取-->
</ul>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.content_left .content_list{
width: 100%;
height: 420px;
overflow: auto;
}
.content_list li{
list-style: none;
width: 100%;
height: 50px;
border-bottom: 1px solid rgba(255,255,255,0.5);
box-sizing: border-box;
user-select: none; /*禁用用户复制*/
}
.content_list li div{
float: left;
color: rgba(255,255,255,0.5);
line-height: 50px;
/*opacity: 0.5;*/
}

.content_list .list_check{
width: 50px;
height: 100%;
text-align: center;
}
/*勾选框*/
.content_list .list_check i{
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #fff;
opacity: 0.5;
}
.content_list .list_number{
width: 20px;
height: 100%;
}
.content_list .list_name {
width: 50%;
height: 100%;
background: #ccc;
}
.content_list .list_singer {
width: 20%;
height: 100%;
background: pink;
}

user-select: none; 可以禁用用户复制功能

完善播放列表

  • 选择框是一个伪选择框,当被点击时,通过添加类名list_checked切换图片即可
  • 鼠标悬停的图标采用精灵图,使用 a 标签加背景图,然后使用 jQuery 监听鼠标的移入移出事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>03:35</span>
<a href="javascript:;" title="删除"></a>
</div>
</li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.list_name .list_menu {
margin-top: 5px;
float: right;
margin-right: 20px;
display: none;
}
/*用a标签设置图标*/
.list_name .list_menu a {
display: inline-block;
width: 36px;
height: 36px;
/*精灵图*/
background: url("../images/icon_list_menu.png") no-repeat 0 0;
}
/*精灵图位置*/
.list_name .list_menu a:nth-child(1) {
background-position: -120px 0;
}
.list_name .list_menu a:nth-child(2) {
background-position: -120px -80px;
}
.list_name .list_menu a:nth-child(3) {
background-position: -120px -120px;
}
.list_name .list_menu a:nth-child(4) {
background-position: -120px -40px;
}
.content_list .list_time a {
display: inline-block;
width: 36px;
height: 36px;
background: url("../images/icon_list_menu.png") no-repeat -120px -160px;
float: left;
margin-top: 5px;
display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function () {
// 1. 监听歌曲的移入移出事件
$(".list_music").hover(
function () { //移入
// 显示子菜单 在使用JQuery动画时最好先调用stop(),以下使用了淡入淡出
$(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");
});
});

自定义滚动条

  • 首先设置父盒子超出隐藏,防止歌曲过多导致布局出问题
1
2
3
.centent_left .content_list{
overflow:auto;
}
  • 自定义滚动条使用了一个 jQuery 插件jQuery custom content scroller,利用这个插件可以轻松设置滚动条样式
  • 下载后本地导入CSS和JS,注意其是依赖jQuery的插件,需要先引入jQuery
1
2
3
4
5
6
7
8
<link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
<!--注意引入的顺序问题,先引入插件和框架后引入自己的样式-->
<link rel="stylesheet" href="css/index.css">

<!--先导入jQuery->框架插件->自己的JS-->
<script src="js/jquery-1.12.4.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/index.js"></script>
  • 利用JS初始化插件,为需要添加的元素调用 mCustomScrollbar() 方法
1
2
3
4
$(function () {
// 0.自定义滚动条,给需要修改样式的父盒子添加
$(".content_list").mCustomScrollbar();
})
  • 在HTML中为该元素添加自定义属性 data-mcs-theme="dark",样式设置可以在Scrollbar themes查找
1
<div class="content_list" data-mcs-theme='minimal-dark'></div>
  • 对滚动条进行微调,比如宽度
1
2
3
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar {
width: 8px;
}

音乐歌曲信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="content_right">
<div class="song_info">
<!--a标签为背景-->
<a href="javascript;;" class="song_info_pic">
<!--img为前景即歌曲图片-->
<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>
<ul class="song_lyric">
<li class="cur">第一条歌词</li>
<li>第二条歌词</li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.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;
}

底部结构

基本结构

  • 进度条可大致分为四部分
    • 图标
    • 使用 a 标签加背景图即可
    • 歌曲进度条(因为此区域需包含进度条及歌曲名称、时间等信息。因此使用 div 作为布局)
    • 音量部分(此部分包含图标及一个拖动条,因此也使用 div 作为盒子进行布局)
1
2
3
4
5
6
7
8
9
10
11
12
<div class="footer_in">
<a href="javascript:;" class="music_pre"></a>
<a href="javascript:;" class="music_play"></a>
<a href="javascript:;" class="music_next"></a>
<div class="music_progress_info"></div>
<a href="javascript:;" class="music_mode"></a>
<a href="javascript:;" class="music_fav"></a>
<a href="javascript:;" class="music_down"></a>
<a href="javascript:;" class="music_comment"></a>
<a href="javascript:;" class="music_only"></a>
<div class="music_voice_info"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.footer_in a {
display: inline-block;
text-decoration: none;
color: #fff;
/*精灵图*/
background: url("../images/player.png") no-repeat 0 0;
margin-right: 20px;
}
/*上一首*/
.footer_in .music_pre {
width: 19px;
height: 20px;
background-position: 0 -30px;
}
/*播放*/
.footer_in .music_play {
width: 21px;
height: 29px;
background-position: 0 0;
}
/*下一首*/
.footer_in .music_next {
width: 19px;
height: 20px;
background-position: 0 -52px;
}
/*进度条*/
.footer_in .music_progress_info {
display: inline-block;
width: 670px;
height: 40px;
background-color: red;
}
/*循环*/
.footer_in .music_mode {
width: 26px;
height: 25px;
background-position: 0px -205px;
}
/*喜欢*/
.footer_in .music_fav {
width: 24px;
height: 21px;
background-position: 0px -96px;
}
/*下载*/
.footer_in .music_down {
width: 22px;
height: 21px;
background-position: 0px -120px;
}
/*评论*/
.footer_in .music_comment {
width: 24px;
height: 24px;
background-position: 0px -400px;
}
/*纯净*/
.footer_in .music_only {
width: 74px;
height: 27px;
background-position: 0px -281px;
}
/*音量*/
.footer_in .music_voice_info {
display: inline-block;
width: 100px;
background: green;
height: 40px;
}

进度条

  • 歌曲部分进度条分歌曲信息和进度条,两个 span 元素即可
  • 进度条使用一种通用的结构。三层结构分别表示背景、前景、圆。
1
2
3
4
5
6
7
8
9
10
11
<div class="music_progress_info">
<div class="music_progress_top">
<span class="music_progress_name">告白气球/周杰伦</span>
<span class="music_progress_time">00:00 / 03:35</span>
</div>
<div class="music_progress_bar">
<div class="music_progress_line">
<div class="music_progress_dot"></div>
</div>
</div>
</div>
  • 音量部分与歌曲信息的进度条同理,图标同样使用 a 标签与图片结合
1
2
3
4
5
6
7
8
<div class="music_voice_info">
<a href="javascript:;" class="music_voice_icon"></a>
<div class="music_voice_bar">
<div class="music_voice_line">
<div class="music_voice_dot"></div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* 歌曲进度条 */
.footer_in .music_progress_info {
display: inline-block;
width: 670px;
height: 40px;
background-color: red;
}
.music_progress_info .music_progress_top {
width: 100%;
height: 30px;
line-height: 30px;
background: #000000;
color: #fff;
}
.music_progress_top .music_progress_name {
float: left;
opacity: 0.5;
}
.music_progress_top .music_progress_name:hover {
opacity: 1;
}
.music_progress_top .music_progress_time {
float: right;
opacity: 0.5;
}

.music_progress_info .music_progress_bar {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.5);
margin-top: 5px;
}
.music_progress_bar .music_progress_line {
width: 100%;
height: 100%;
background: #ffffff;
}
.music_progress_bar .music_progress_dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
position: relative;
top: -5px;
left: 100px;
cursor: pointer;
}
/* 音量控制 */
.footer_in .music_voice_info {
display: inline-block;
width: 100px;
background: green;
height: 40px;
position: relative;
}
.music_voice_info .music_voice_icon {
width: 26px;
height: 21px;
background-position: 0 -144px;
position: absolute;
left: 0;
top: 10px;
}
.music_voice_info .music_voice_bar {
width: 70px;
height: 4px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
right: 0;
top: 18px;
}
.music_voice_bar .music_voice_line {
width: 50px;
height: 100%;
background: #ffffff;
}
.music_voice_bar .music_voice_dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
position: absolute;
top: -5px;
left: 50px;
}

底部微调完善

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.footer {
height: 80px;
}
.footer_in .music_play {
vertical-align: -5px;
}
.footer_in .music_progress_info {
top: 10px;
}
.footer_in .music_voice_info {
top: 10px;
}
/* 播放按钮点击 */
.footer_in .music_play2 {
background-position: -30px 0;
}
/* 循环模式样式切换 */
.footer_in .music_mode2 {
width: 23px;
height: 20px;
background-position: 0px -260px;
}
.footer_in .music_mode3 {
width: 25px;
height: 19px;
background-position: 0px -74px;
}
.footer_in .music_mode4 {
width: 26px;
height: 25px;
background-position: 0px -232px;
}
/* 喜欢按钮 */
.footer_in .music_fav2 {
background-position: -30px -96px;
}
/* 纯净模式 */
.footer_in .music_only2 {
background-position: 0px -310px;
}

高斯模糊背景

  • 通过切换不同音乐会根据音乐图片切换不同的模糊背景
  • 模糊背景通过使用一张音乐图片加一个淡灰色的蒙版即可
1
2
<div class="mask_bg"></div>
<div class="mask"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 背景设置 */
.mask_bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/*音乐图片*/
background: url("../images/lnj.jpg") no-repeat 0 0;
/*铺满整个屏幕*/
background-size: cover;
z-index: -2;
/*模糊效果*/
filter: blur(100px);
}
/*遮罩*/
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(0, 0, 0, 0.35);
}

加载歌曲

读取JSON文件

  • 加载歌曲使用了 jQuery 得 Ajax 方法。通过一个json 文件获取歌曲的相关信息
  • source文件夹下存放了歌曲MP3、图片、歌词等信息,并创建了一个musiclist.json文件存放路径和其他信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
[
{
"name":"告白气球",
"singer": "周杰伦",
"album": "周杰伦的床边故事",
"time": "03:35",
"link_url":"./source/告白气球.mp3",
"cover":"./source/告白气球.jpg",
"link_lrc":"./source/告白气球.txt"
},
{
"name":"As long AS Love Me",
"singer": "Justin Bieber",
"album": "NOW That's What I Call Music! 44",
"time": "03:49",
"link_url":"./source/AslongASLoveMe.mp3",
"cover": "./source/AslongASLoveMe.jpg",
"link_lrc": "./source/AslongASLoveMe.txt"
},
{
"name":"Something Just Like This",
"singer": "Chainsmokers",
"album": "Something Just Like This",
"time": "04:07",
"link_url":"./source/SomethingJustLikeThis.mp3",
"cover":"./source/SomethingJustLikeThis.jpg",
"link_lrc":"./source/SomethingJustLikeThis.txt"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 3. 加载歌曲列表
function getPlayerList() {
$.ajax({
url: "./source/musiclist.json",
dataType: "json",
success: function (data) {
// 3.1 遍历获取到的数据创建每一条音乐
var $musicList = $(".content_list ul");
$.each(data, function (index, ele) {
//定义一个方法
var $item = createMusicItem(index, ele);
//动态生成的歌曲追加到ul后
$musicList.append($item);
});
},
error: function (e) {
console.log(e);
},
});
}
//调用函数
getPlayerList();
// 创建一条音乐的方法,可以把前面静态的HTML删掉,通过以下动态生成
function createMusicItem(index, music) {
var $item = $(
'<li class="list_music"><div class="list_check "><i></i></div><div class="list_number">' +
(index + 1) +
'</div><div class="list_name">' +
music.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">' +
music.singer +
'</div><div class="list_time"><span>' +
music.time +
'</span><a href="javascript:;" title="删除"></a></div></li>'
);
return $item;
}

完善事件

  • 由于音乐列表改成了 js 动态创建,那么就会导致曾经绑定的事件失效,因此需要修改为事件委托方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 1. 监听歌曲的移入移出事件
$(".content_list").delegate(".list_music", "mouseenter", function () {
// 显示子菜单
$(this).find(".list_menu").stop().fadeIn(100);
$(this).find(".list_time a").stop().fadeIn(100);
// 隐藏时长
$(this).find(".list_time span").stop().fadeOut(100);
});
$(".content_list").delegate(".list_music", "mouseleave", 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. 监听复选框的点击事件
$(".content_list").delegate(".list_check", "click", function () {
$(this).toggleClass("list_checked");
});

播放图标切换

  • 当播放一首歌曲时,另一首歌单的播放图标要发生改变
  • 为此按钮添加事件同样需要以事件委托的方式。当点击后会发生两件事:
    • 将其他播放按钮改为暂停状态
    • 将底部播放按钮修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 3. 添加子菜单播放按钮的监听
var $musicPlay = $(".music_play");
$(".content_list").delegate(".list_menu_play", "click", function () {
// 3.1 切换播放的图标
$(this).toggleClass("list_menu_play2");
// 3.2 复原其他的播放图标
$(this)
.parents(".list_music")
.siblings()
.find(".list_menu_play")
.removeClass("list_menu_play2");
// 3.3 同步底部播放按钮
if ($(this).attr("class").indexOf("list_menu_play2") != -1) {
// 当前是播放状态
$musicPlay.addClass("music_play2");
} else {
$musicPlay.removeClass("music_play2");
}
});

播放状态切换

  • 要想控制单个,必须设置时对单个设置,而不是全部,因此 css 部分需要微调
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.content_list li div {
color: rgba(255, 255, 255, 0.5);
}
.content_list .list_check i {
opacity: 0.5;
}
.content_list .list_checked i {
opacity: 1;
}
.list_name .list_menu a {
opacity: 0.5;
}
.list_name .list_menu a:hover {
opacity: 1;
}
.content_list .list_time a {
opacity: 0.5;
}
.content_list .list_time a:hover {
opacity: 1;
}
  • 将 css 修改完成后,接下来就是在 JavaScript 绑定的事件中进行修改了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 3.3 同步底部播放按钮
if ($(this).attr("class").indexOf("list_menu_play2") != -1) {
// 当前是播放状态
$musicPlay.addClass("music_play2");
// 让文字高亮
$(this).parents(".list_music").find("div").css("color", "#fff");
} else {
$musicPlay.removeClass("music_play2");
// 让文字不高亮
$(this)
.parents(".list_music")
.find("div")
.css("color", "rgba(255,255,255,0.5)");
}

序号动画

  • 当点击播放一首曲目时,会隐藏序号显示播放动态图片。并做一些排他设置

1
2
3
4
5
.content_list .list_number2 {
color: transparent !important;
/*添加播放动态图*/
background: url("../images/wave.gif") no-repeat 0 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(".content_list").delegate(".list_menu_play", "click", function () {
var $item = $(this).parents(".list_music");
// 3.1 切换播放的图标
$(this).toggleClass("list_menu_play2");
// 3.2 复原其他的播放图标
$(this)
.parents(".list_music")
.siblings()
.find(".list_menu_play")
.removeClass("list_menu_play2");
// 3.3 同步底部播放按钮
if ($(this).attr("class").indexOf("list_menu_play2") != -1) {
// 当前是播放状态
$musicPlay.addClass("music_play2");
// 让文字高亮
$item.find("div").css("color", "#fff");
$item.siblings().find("div").css("color", "rgba(255,255,255,0.5)");
} else {
$musicPlay.removeClass("music_play2");
// 让文字不高亮
$item.find("div").css("color", "rgba(255,255,255,0.5)");
}
// 3.4 切换序号的状态
$item.find(".list_number").toggleClass("list_number2");
$item.siblings().find(".list_number").removeClass("list_number2");
});