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

scalable thumb

This commit is contained in:
DIYgod 2018-03-08 22:44:35 +08:00
parent a31d911948
commit dedc1bf62d
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/css/index.scss
View File

@ -207,6 +207,12 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
cursor: pointer !important;
flex: 1;
&:hover {
.aplayer-bar .aplayer-played .aplayer-thumb {
transform: scale(1);
}
}
.aplayer-bar {
position: relative;
height: 2px;
@ -236,11 +242,12 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 8px;
width: 8px;
height: 10px;
width: 10px;
border-radius: 50%;
background: #fff;
cursor: pointer !important;
cursor: pointer;
transition: all .3s ease-in-out;
transform: scale(0);
}
}
}
@ -249,7 +256,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
.aplayer-time {
position: relative;
right: 0;
bottom: 3px;
bottom: 4px;
height: 17px;
color: #999;
font-size: 11px;

7
src/js/controller.js
View File

@ -58,13 +58,6 @@ class Controller {
}
});
this.player.template.thumb.addEventListener('mouseover', () => {
this.player.template.thumb.style.background = this.player.options.theme;
});
this.player.template.thumb.addEventListener('mouseout', () => {
this.player.template.thumb.style.background = '#fff';
});
const thumbMove = (event) => {
const e = event || window.event;
let percentage = (e.clientX - utils.getElementViewLeft(this.player.template.barWrap)) / barWidth;

2
src/template/player.art
View File

@ -14,7 +14,7 @@
<div class="aplayer-bar">
<div class="aplayer-loaded" style="width: 0"></div>
<div class="aplayer-played" style="width: 0; background: {{ options.theme }};">
<span class="aplayer-thumb" style="border: 1px solid {{ options.theme }};"></span>
<span class="aplayer-thumb" style="background: {{ options.theme }};"></span>
</div>
</div>
</div>