xiaoxue_admin
/
APlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize the style of aplayer with lrc

This commit is contained in:
DIYgod 2016-10-11 11:24:03 +08:00
parent 89992c84c9
commit c1c83d3c96
No known key found for this signature in database
GPG Key ID: F8797DD1088C6506
4 changed files with 47 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/APlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/APlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
src/APlayer.js
View File

@ -112,8 +112,8 @@ class APlayer {
for (let i = 0; i < this.lrc.length; i++) {
if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) {
this.lrcIndex = i;
this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 20}px)`;
this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 20}px)`;
this.lrcContents.style.transform = `translateY(${-this.lrcIndex * 16}px)`;
this.lrcContents.style.webkitTransform = `translateY(${-this.lrcIndex * 16}px)`;
this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current');
this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current');
}
@ -140,6 +140,9 @@ class APlayer {
if (this.option.showlrc) {
this.element.classList.add('aplayer-withlrc');
}
if (this.option.music.length > 1) {
this.element.classList.add('aplayer-list');
}
// fill in HTML
let eleHTML = `
@ -172,7 +175,7 @@ class APlayer {
- <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>
</span>
<div class="aplayer-volume-wrap">
<button class="aplayer-icon aplayer-icon-volume-down">`
<button class="aplayer-icon aplayer-icon-volume-down" ${this.isMobile ? 'style="display: none;"' : ''}>`
+ this.getSVG('volume-down')
+ ` </button>
<div class="aplayer-volume-bar-wrap">

57
src/APlayer.scss
View File

@ -1,6 +1,6 @@
$aplayer-height: 66px;
$lrc-height: 40px;
$aplayer-height-lrc: $aplayer-height + $lrc-height;
$lrc-height: 30px;
$aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer-narrow {
width: $aplayer-height;
@ -13,16 +13,32 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
&.aplayer-narrow {
width: $aplayer-height-lrc;
}
&.aplayer .aplayer-pic {
height: $aplayer-height-lrc;
width: $aplayer-height-lrc;
&.aplayer {
.aplayer-pic {
height: $aplayer-height-lrc;
width: $aplayer-height-lrc;
}
.aplayer-info {
margin-left: $aplayer-height-lrc;
height: $aplayer-height-lrc;
}
.aplayer-lrc {
display: block;
}
.aplayer-info {
padding: 10px 7px 0 7px;
}
}
&.aplayer .aplayer-info {
margin-left: $aplayer-height-lrc;
height: $aplayer-height-lrc;
}
&.aplayer .aplayer-lrc {
display: block;
}
.aplayer-list {
&.aplayer {
.aplayer-info {
border-bottom: 1px solid #e9e9e9;
}
}
}
@ -135,6 +151,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
margin-bottom: 13px;
user-select: text;
cursor: default;
padding-bottom: 2px;
.aplayer-title {
font-size: 14px;
@ -285,7 +302,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
background: #fff;
text-align: center;
overflow: hidden;
margin: -10px 0 10px;
margin: -10px 0 7px;
&:before {
position: absolute;
@ -311,17 +328,17 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
width: 100%;
height: 33%;
content: ' ';
background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 );
}
p {
font-size: 12px;
color: #666;
line-height: 20px !important;
height: 20px !important;
line-height: 16px !important;
height: 16px !important;
padding: 0 !important;
margin: 0 !important;
transition: all 0.5s ease-out;
@ -380,6 +397,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
transition: all 0.2s ease;
overflow: hidden;
&:first-child {
border-top: none;
}
&:hover {
background: #efefef;
}