效果见右上角:展示页面:http://xyy9.gitee.io/roll/
鼠标移入可展开歌单和歌曲封面信息
默认选中第一首,点击碟片进行播放,底下图片切换至对应图片,播放时,碟片进行旋转,唱针不动,点击歌曲名字进行重播。
源码如下:
html
<!--==========黑胶碟片旋转=========-->
<div id="songstatus">
<div id="songstatus_pic" onclick="control(songNum)">
<img src="img/music_disc.png" id="status_pic"><!--黑胶唱片-->
<img src="img/discpointer.png" id="discpointer_pic"><!--指针-->
</div>
<div id="songslist">
<li id="songName1" style="margin-top: 20px;">
<span onclick="start(1)">I'm in love</span>
<audio src="music/I'm%20in%20love.mp3" preload loop id="music1" class="music"></audio>
</li>
<li id="songName2">
<span onclick="start(2)">千与千寻</span>
<audio src="music/千与千寻.mp3" preload loop id="music2" class="music"></audio>
</li>
<li id="songName3">
<span onclick="start(3)">余生相</span>
<audio src="music/余生相.mp3" preload loop id="music3" class="music"></audio>
</li>
<div id="playStatus">
<img src="img/songCover0.png" id="songCover">
</div>
</div>
</div>
music_disc.css
#songstatus{
width: 200px;
height: 80px;
position: fixed;
right: 0px;
top: 0px;
padding-top: 5px;
z-index: 1000;
transition: 0.5s;
}
#status_pic{
width: 80px;
height: 80px;
position: fixed;
right: 50px;
top: 5px;
border-radius:100%;
transition: 0.5s;
z-index: 1;
}
#discpointer_pic{
width: 50px;
height: 40px;
position: fixed;
right: 75px;
top: 5px;
transition: 0.5s;
z-index: 1;
}
#songstatus:hover{
background-color: white;
}
#songstatus:hover #status_pic{
width: 100px;
height: 100px;
}
#songstatus:hover #discpointer_pic{
width: 80px;
height: 70px;
}
#songstatus:hover #playStatus{
display: block;
}
#songstatus:hover #songslist{
width: 200px;
opacity: 1;
}
#songslist{
background-color: white;
width: 0px;
height: 100%;
position: fixed;
right: 0px;
top: 85px;
opacity: 0;
transition: 0.5s;
}
#songslist li{
line-height: 50px;
text-align: center;
}
#songslist li span{
font-size: 20px;
color: black;
}
#songName1{
border-right:5px solid orangered;
font-weight:bold;
background-color: #F7F7F7;
}
#playStatus{
width: 200px;
height: 100px;
right: 0px;
bottom: 0px;
position: fixed;
display: none;
}
#songCover{
width: 150px;
height: 150px;
right: 25px;
bottom: 50px;
position: fixed;
box-shadow: 5px 5px 5px 5px #E5DFD3;
}
musicPlayer.js
var rotateVal = 0;
var InterVal;
var isplay = 0;
var songNum = 1;
function control(num) {
var audio = document.getElementById('music'+num);
if(audio!==null){
if(audio.paused){
audio.play();
rotate();
}else{
audio.pause();
clearInterval(InterVal);
}
}
}
function rotate () {
InterVal = setInterval(function () {
var img = document.getElementById('status_pic');
rotateVal += 7;
img.style.transform = 'rotate(' + rotateVal + 'deg)';
img.style.transition = '0.1s linear';
}, 100)
}
function start(num){
var max = 3;
var audio;
var name;
songNum = num;
for(var i=1;i<=max;i++){
audio = document.getElementById('music'+i);
audio.currentTime = 0;
audio.pause();
name = document.getElementById('songName'+i);
name.style.borderRight = '0px solid orangered';
name.style.fontWeight = 'normal';
name.style.backgroundColor = 'white';
if(i == num){
audio.play();
name.style.borderRight = '5px solid orangered';
name.style.fontWeight = 'bold';
name.style.backgroundColor = '#F7F7F7';
document.getElementById('songCover').src = 'img/songCover'+num+'.png';
}
}
clearInterval(InterVal);
rotate();
}
网站源码:https://gitee.com/xyy9/roll
图片:
碟片
https://gitee.com/xyy9/roll/blob/master/img/music_disc.png
唱针
https://gitee.com/xyy9/roll/blob/master/img/discpointer.png