|
|
@@ -1,45 +1,80 @@
|
|
|
const data = [
|
|
|
{
|
|
|
"id": "0",
|
|
|
- "name": "宇宙喵 Kuroro",
|
|
|
- "intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/16202921382044L6QIxJYF2J.jpg"
|
|
|
+ "name": "凡笙弦語",
|
|
|
+ "intro": "台灣新人Vtuber鹹魚翻身後依然是條鹹魚以歌唱與歌曲創作為主！",
|
|
|
+ "img": "https://i.imgur.com/1Oahh38.jpg",
|
|
|
+ "style": ["可愛"],
|
|
|
+ "tags": ["#FS鹹魚", "#魚塭", "#TWVtuber" ],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": null
|
|
|
},
|
|
|
{
|
|
|
"id": "1",
|
|
|
- "name": "達達與妃妃 DaiDai FeiFei",
|
|
|
+ "name": "小烏龜-Yui",
|
|
|
"intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/162029083055025AVzgnnjV0.jpg"
|
|
|
+ "img": "https://i.imgur.com/iHtiCpP.jpg",
|
|
|
+ "style": ["可愛"],
|
|
|
+ "tags": ["#小烏龜yui"],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": null
|
|
|
},
|
|
|
{
|
|
|
"id": "2",
|
|
|
- "name": "汪來汪趣 wdog",
|
|
|
+ "name": "柚餓幽窮",
|
|
|
"intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/162679825917082cO19F1hVS.jpg"
|
|
|
+ "img": "https://i.imgur.com/g00i7Ji.jpg",
|
|
|
+ "style": ["奶兇"],
|
|
|
+ "tags": [],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": null
|
|
|
},
|
|
|
{
|
|
|
"id": "3",
|
|
|
- "name": "左翌設計 ZoeL Design",
|
|
|
+ "name": "花御いしき",
|
|
|
"intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
|
|
|
+ "img": "https://i.imgur.com/e0Nl0FW.png",
|
|
|
+ "style": ["溫柔可愛", "人格分裂", "配音系"],
|
|
|
+ "tags": ["#擴散希望", "#男vtuber", " #虛擬youtuber", "#新人VTuber"],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": "https://www.mboxdrive.com/%E8%81%B2%E9%9F%B3%E7%9B%92%E5%AD%901%20-%20ishiki%20hanao.mp4"
|
|
|
},
|
|
|
{
|
|
|
"id": "4",
|
|
|
- "name": "左翌設計 ZoeL Design",
|
|
|
+ "name": "Ikusen(小千)",
|
|
|
"intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
|
|
|
+ "img": "https://i.imgur.com/GXHDTcd.png",
|
|
|
+ "style": ["御姊"],
|
|
|
+ "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": null
|
|
|
},
|
|
|
{
|
|
|
"id": "5",
|
|
|
- "name": "左翌設計 ZoeL Design",
|
|
|
+ "name": "迷途小喵",
|
|
|
"intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
|
|
|
+ "img": "https://i.imgur.com/YnSPyv7.jpg",
|
|
|
+ "style": ["御姊", "多聲線"],
|
|
|
+ "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": null
|
|
|
},
|
|
|
{
|
|
|
"id": "6",
|
|
|
"name": "左翌設計 ZoeL Design",
|
|
|
"intro": "lorem",
|
|
|
- "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg"
|
|
|
+ "img": "https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg",
|
|
|
+ "style": ["御姊", "多聲線"],
|
|
|
+ "tags": ["#台V", "#いくせん", "#VTuber ", "#TWvtuber"],
|
|
|
+ "contact": "",
|
|
|
+ "follow": "",
|
|
|
+ "mp4": null
|
|
|
},
|
|
|
];
|
|
|
|
|
|
@@ -51,12 +86,18 @@ function getVtuber() {
|
|
|
console.log(result);
|
|
|
let str = '';
|
|
|
for(let i = 0; i < result.length; i++){
|
|
|
+ let style = '';
|
|
|
+ for(let j = 0; j < result[i].style.length; j++){
|
|
|
+ style += `<span class="vt-style">${result[i].style[j]}</span>`;
|
|
|
+ console.log(result[i].style.length);
|
|
|
+ }
|
|
|
str += `<div class="col-6 col-sm-4 col-md-3">
|
|
|
<div class="card" style="width: 100%;">
|
|
|
<div class="vt-ribbon"><p>Vtuber</p></div>
|
|
|
- <div class="card-img-fr"><img class="card-img-top" src="${result[i].img}" alt="Card image cap"></div>
|
|
|
+ <div class="card-img-fr" style="background-image:url(${result[i].img})"></div>
|
|
|
<div class="card-body">
|
|
|
<h5 class="card-title">${result[i].name}</h5>
|
|
|
+ ${style}
|
|
|
<button class="card-link" data-toggle="modal" data-target="#more1Modal" data-id="${result[i].id}" >查看更多></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -65,15 +106,76 @@ function getVtuber() {
|
|
|
$('.vt-list .vt-content').html(str);
|
|
|
|
|
|
$('.vt-content .card-link').click(function(){
|
|
|
+ const music = document.querySelector('.modal-body-sample audio');
|
|
|
+ const progressBar = document.querySelector('#progress-bar');
|
|
|
+ const progressZone = document.querySelector('.music-progress');
|
|
|
+
|
|
|
let selected = result.filter(item =>
|
|
|
item.id == $(this).data('id')
|
|
|
)[0];
|
|
|
console.log(selected);
|
|
|
$('#more1Modal .modal-title').text(selected.name);
|
|
|
- $('#more1Modal .modal-imgfr img').attr('src', selected.img);
|
|
|
- $('#more1Modal .p').text(selected.intro);
|
|
|
+ $('#more1Modal .modal-imgfr').css('background-image', `url(${selected.img})`);
|
|
|
+ $('#more1Modal p').text(selected.intro);
|
|
|
+ if(selected.mp4 == null) {
|
|
|
+ $('.modal-body-sample').css('display', 'none');
|
|
|
+ } else {
|
|
|
+ $('.modal-body-sample audio').attr('src', selected.mp4);
|
|
|
+ }
|
|
|
+ let hashtagStr = "";
|
|
|
+ for(let i = 0; i < selected.tags.length; i++){
|
|
|
+ hashtagStr+= `<span class="hashtag-pill">${selected.tags[i]}</span>`;
|
|
|
+ };
|
|
|
+ $('#more1Modal .modal-hashtag').html(hashtagStr);
|
|
|
+ let isPlaying = false;
|
|
|
+ $('.modal-body-toggleplay').click(function(){
|
|
|
+ //isPlaying? pauseMusic(music) : playMusic(music)
|
|
|
+ if(isPlaying) {
|
|
|
+ music.pause();
|
|
|
+ $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png");
|
|
|
+ isPlaying = false;
|
|
|
+ } else {
|
|
|
+ music.play();
|
|
|
+ $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/f5PWQUb.png");
|
|
|
+ isPlaying = true;
|
|
|
+ }
|
|
|
+ console.log(isPlaying);
|
|
|
+ });
|
|
|
+ $('[data-dismiss="modal"]').click(function() {
|
|
|
+ music.pause();
|
|
|
+ $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png");
|
|
|
+ isPlaying = false;
|
|
|
+ });
|
|
|
+ music.addEventListener('timeupdate', updateProgress);
|
|
|
+ progressZone.addEventListener('click', setProgress);
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-getVtuber();
|
|
|
+getVtuber();
|
|
|
+
|
|
|
+const updateProgress = (e) => {
|
|
|
+ const music = document.querySelector('.modal-body-sample audio');
|
|
|
+ const progressBar = document.querySelector('#progress-bar');
|
|
|
+ const progressZone = document.querySelector('.music-progress');
|
|
|
+ const {
|
|
|
+ duration,
|
|
|
+ currentTime
|
|
|
+ } = e.srcElement;
|
|
|
+ const progressPercent = (currentTime / duration) * 100
|
|
|
+ progressBar.style.width = `${progressPercent}%`
|
|
|
+ if(progressPercent == 100) {
|
|
|
+ music.pause();
|
|
|
+ $('.modal-body-toggleplay').attr("src", "https://i.imgur.com/gYst9TQ.png");
|
|
|
+ isPlaying = false;
|
|
|
+ console.log('test');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function setProgress(e) {
|
|
|
+ const music = document.querySelector('.modal-body-sample audio');
|
|
|
+ const width = this.clientWidth;
|
|
|
+ const setPoint = e.offsetX;
|
|
|
+ const duration = music.duration;
|
|
|
+ music.currentTime = (setPoint / width) * duration;
|
|
|
+}
|
huaisianhuang
