模拟的后台数据,,还是要好好学一下mock data.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
[
{
"image" : "/source/img/choubaguai.jpg",
"audio" : "/source/mp3/choubaguai.mp3",
"song" : "丑八怪",
"album" : "意外",
"singer" : "薛之谦",
"duration" : 253,
"isLike" : true
},
{
"image" : "/source/img/shapeofyou.jpg",
"audio" : "/source/mp3/shapeofyou.mp3",
"song" : "shape of you",
"album" : "意外",
"singer" : "薛之谦",
"duration" : 253,
"isLike" : true
},
{
"image" : "/source/img/xiaoban.jpg",
"audio" : "/source/mp3/xiaoban.mp3",
"song" : "丑八怪",
"album" : "意外",
"singer" : "薛之谦",
"duration" : 253,
"isLike" : true
}
]
step1 render.js
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
// 页面渲染 img + info + like
(function ($,root) {
function renderImg (src) {
var img = new Image();
img.src = src;
img.onload = function () {
// 图片懒加载
$(".img-box img").attr('src',src);
// 高斯模糊
root.gaussBlur($("body")[0],src);
}
}
// 更新 info数据
function renderInfo (info) {
let str = `<div class="song-name">${info.song}</div>
<div class="singer-name">${info.singer}</div>
<div class="album-name">${info.album}</div>`;
$(".song-info").html(str);
}
function renderIsLike () {
}
root.render = function (data) {
renderImg(data.image);
renderInfo(data);
}
root.renderImg = renderImg;
})(window.Zepto,window.player || (window.player = {}));
step2
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
// 页面渲染 img + info + like
(function ($,root) {
function renderImg (src) {
var img = new Image();
img.src = src;
img.onload = function () {
// 图片懒加载
$(".img-box img").attr('src',src);
root.gaussBlur($("body")[0],src);
}
}
// 高斯模糊
function renderInfo (info) {
let str = `<div class="song-name">${info.song}</div>
<div class="singer-name">${info.singer}</div>
<div class="album-name">${info.album}</div>`;
$(".song-info").html(str);
}
function renderIsLike (like) {
if (like) {
$(".like").addClass('liking');
} else{
$(".like").removeClass('liking');
}
}
root.render = function (data) {
renderImg(data.image);
renderInfo(data);
renderIsLike (data.isLike);
}
root.renderImg = renderImg;
})(window.Zepto,window.player || (window.player = {}));
step3 bindEvent , control的事件
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
var root = window.player;
var nowIndex = 0;
var dataLength = null;
var dataclone;
root.gaussBlur = gaussBlur;
function getData(url) {
$.ajax({
type: "GET",
url: url,
async: true,
success: function(data) {
console.log(data[2]);
dataLength = data.length;
dataclone = data;
root.render(data[0]);
bindEvent();
},
error: function() {
console.log("error");
}
});
}
function bindEvent() {
$(".pre").on('click', function() {
if(nowIndex == 0) {
nowIndex = dataLength - 1;
} else {
nowIndex--;
}
root.render(dataclone[nowIndex]);
});
$(".next").on('click', function() {
if(nowIndex == dataLength - 1) {
nowIndex = 0;
} else {
nowIndex++;
}
root.render(dataclone[nowIndex]);
});
}
getData("../mock/data.json");
step4 AudioManager.js
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
(function($, root) {
// play pause getAudio
function AudioManager(src) {
this.audio = document.createElement('audio');
// this.audio.src = src;
// oAudio.setAttribute('autoplay','autoplay');
this.state = 'pause';
}
AudioManager.prototype = {
play: function() {
this.audio.play();
this.state = 'play';
},
pause: function() {
this.audio.pause();
this.state = 'pause';
},
getAudio: function(src) {
this.audio.src = src;
this.audio.load();
},
}
root.audioManager = new AudioManager();
})(window.Zepto, window.player || (window.player = {}));
index.js
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
var root = window.player;
var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';
var audio = root.audioManager;
root.gaussBlur = gaussBlur;
function getData(url) {
$.ajax({
type: "GET",
url: url,
async: true,
success: function(data) {
console.log(data[2]);
dataLength = data.length;
dataclone = data;
root.render(data[0]);
audio.getAudio(data[nowIndex].audio);
bindEvent();
},
error: function() {
console.log("error");
}
});
}
function bindEvent() {
$(".pre").on('click', function() {
if(nowIndex == 0) {
nowIndex = dataLength - 1;
} else {
nowIndex--;
}
audio.getAudio(dataclone[nowIndex].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[nowIndex]);
});
$(".next").on('click', function() {
if(nowIndex == dataLength - 1) {
nowIndex = 0;
} else {
nowIndex++;
}
audio.getAudio(dataclone[nowIndex].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[nowIndex]);
});
$(".play").on('click', function() {
// 图案变成 暂停
// 音乐停止播放
// 图片停止旋转.
if(audio.state == 'play') {
$(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
audio.pause();
} else if(audio.state == 'pause') {
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
audio.play();
}
})
}
getData("../mock/data.json");
step5 把 index 弄成模块分割出来 indexControl.js
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
(function($, root) {
function Control() {
this.index = 0;
}
Control.prototype = {
pre: function() {
if(this.index == 0) {
this.index = dataLength - 1;
} else {
this.index--;
}
return this.index;
},
next: function() {
if(this.index == dataLength - 1) {
this.index = 0;
} else {
this.index++;
}
return this.index;
}
}
root.controlIndex = new Control();
})(window.Zepto, window.player || (window.player = {}));
index.js
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
var root = window.player;
//var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';
var audio = root.audioManager;
root.gaussBlur = gaussBlur;
function getData(url) {
$.ajax({
type: "GET",
url: url,
async: true,
success: function(data) {
console.log(data[2]);
var i = root.controlIndex.index;
dataLength = data.length;
dataclone = data;
root.render(data[i]);
audio.getAudio(data[i].audio);
bindEvent();
},
error: function() {
console.log("error");
}
});
}
function bindEvent() {
$(".pre").on('click', function() {
// if(nowIndex == 0) {
// nowIndex = dataLength - 1;
// } else {
// nowIndex--;
// }
var i = root.controlIndex.pre();
audio.getAudio(dataclone[i].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[i]);
});
$(".next").on('click', function() {
// if(nowIndex == dataLength - 1) {
// nowIndex = 0;
// } else {
// nowIndex++;
// }
var i = root.controlIndex.next();
audio.getAudio(dataclone[i].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[i]);
});
$(".play").on('click', function() {
// 图案变成 暂停
// 音乐停止播放
// 图片停止旋转.
if(audio.state == 'play') {
$(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
audio.pause();
} else if(audio.state == 'pause') {
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
audio.play();
}
})
}
getData("../mock/data.json");
step6 优化 indexControl.js 真的是秀的我一脸懵逼, 果然数学强的话, 一个公式能顶好多if else indexControl.js
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
(function($, root) {
function Control(len) {
this.index = 0;
this.len = len;
}
Control.prototype = {
pre: function() {
return this.getIndex(-1);
},
next: function() {
return this.getIndex(1);
},
// 计算改变后的索引
getIndex : function (val) {
var index = this.index;
var len = this.len;
// 这真是秀懵逼了.
var curIndex = (index + val + len) % len;
this.index = curIndex;
return curIndex;
}
}
root.controlIndex = Control;
})(window.Zepto, window.player || (window.player = {}));
index.js
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
var root = window.player;
//var nowIndex = 0;
var dataLength = null;
var dataclone;
var url = '../mock/data.json';
var audio = root.audioManager;
var control;
root.gaussBlur = gaussBlur;
function getData(url) {
$.ajax({
type: "GET",
url: url,
async: true,
success: function(data) {
console.log(data[2]);
dataLength = data.length;
dataclone = data;
control = new root.controlIndex(dataLength);
var i = control.index;
console.log(i);
root.render(data[i]);
audio.getAudio(data[i].audio);
bindEvent();
},
error: function() {
console.log("error");
}
});
}
function bindEvent() {
$(".pre").on('click', function() {
// if(nowIndex == 0) {
// nowIndex = dataLength - 1;
// } else {
// nowIndex--;
// }
var i = control.pre();
audio.getAudio(dataclone[i].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[i]);
});
$(".next").on('click', function() {
// if(nowIndex == dataLength - 1) {
// nowIndex = 0;
// } else {
// nowIndex++;
// }
var i = control.next();
audio.getAudio(dataclone[i].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[i]);
});
$(".play").on('click', function() {
// 图案变成 暂停
// 音乐停止播放
// 图片停止旋转.
if(audio.state == 'play') {
$(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
audio.pause();
} else if(audio.state == 'pause') {
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
audio.play();
}
})
}
getData("../mock/data.json");
step7 bindEvent 切歌,进一步优化 接着懵逼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("body").on('play:changed',function (e,index) {
audio.getAudio(dataclone[index].audio);
audio.play();
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
root.render(dataclone[index]);
})
$(".pre").on('click', function() {
var i = control.pre();
$("body").trigger('play:changed',i);
});
$(".next").on('click', function() {
var i = control.next();
$("body").trigger('play:changed',i);
});
这里有个疑问, 为什么不这样写? 虽然暂时还没看出来好在哪里,但肯定是有好处的. 而且看起来很高级. 问题应该改成, 自定义事件有什么用处? ``` function playchanged (index) { audio.getAudio(dataclone[index].audio); audio.play(); $(“.icon-PLAY”).removeClass(‘icon-PLAY’).addClass(‘icon-stop’); root.render(dataclone[index]); }
$(“.pre”).on(‘click’, function() { var i = control.pre(); playchanged(i); }); $(“.next”).on(‘click’, function() { var i = control.next(); playchanged(i); });
1
2
3
-------------------------------------
step 8
加入旋转
var root = window.player; //var nowIndex = 0; var dataLength = null; var dataclone; var url = ‘../mock/data.json’;
var audio = root.audioManager;
var control;
var timer;
root.gaussBlur = gaussBlur;
function getData(url) { $.ajax({ type: “GET”, url: url, async: true, success: function(data) { console.log(data[2]); dataLength = data.length; dataclone = data; control = new root.controlIndex(dataLength); var i = control.index; console.log(i); root.render(data[i]); audio.getAudio(data[i].audio); bindEvent(); }, error: function() { console.log(“error”); } }); }
function bindEvent() {
function playchanged (index) { audio.getAudio(dataclone[index].audio); audio.play(); $(“.icon-PLAY”).removeClass(‘icon-PLAY’).addClass(‘icon-stop’); root.render(dataclone[index]); rotate();
1
2
3
4
$(".img-box").css({
'transform' : 'rotateZ(0deg)',
'transition' : 'none'
}); }
$(“.pre”).on(‘click’, function() { var i = control.pre(); playchanged(i); }); $(“.next”).on(‘click’, function() { var i = control.next(); playchanged(i); });
$(“.play”).on(‘click’, function() { // 图案变成 暂停 // 音乐停止播放 // 图片停止旋转.
1
2
3
4
5
6
7
8
9
if(audio.state == 'play') {
$(".icon-stop").removeClass('icon-stop').addClass('icon-PLAY');
audio.pause(); // var reg = /\d+/g; // var deg = $(".img-box").css('transform').match(reg)[0]; // $(".img-box").attr('data-deg',deg);
clearInterval(timer);
} else if(audio.state == 'pause') {
$(".icon-PLAY").removeClass('icon-PLAY').addClass('icon-stop');
audio.play();
rotate();
}
}) }
function rotate () { clearInterval(timer); // var deg = Number($(“.img-box”).attr(‘data-deg’)) || 0; var deg = 0; timer = setInterval(function () { deg += 2; $(“.img-box”).css({ ‘transform’ : ‘rotateZ(‘ + deg +’deg)’, ‘transition’ : ‘transform .2s ease-in-out’ }); },200); }
getData(“../mock/data.json”); ```
