版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
音乐盒
css代码
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 655px;
position: relative;
background: url(img/音乐背景_WPS图片1.jpg) no-repeat;
background-size: 100% 100%;
}
#btns {
width: 700px;
height: 80px;
position: absolute;
top: 570px;
background-color: rgba(0, 0, 0, 1);
}
#title{
width: 200px;
height: 30px;
font-size: 20px;
position: absolute;
top: 30px;
left: 20px;
color: pink;
}
#shrink {
width: 22px;
height: 80px;
position: absolute;
top: 0;
right: 0;
background: url(img/player_bg.png);
background-position: 0px -12px;
opacity: 0.7;
}
#upmusic {
width: 30px;
height: 30px;
position: absolute;
top: 30px;
left: 250px;
background: url(img/player_bg.png);
background-position: -71px 0px;
opacity: 0.7;
}
#upmusic:hover {
background-position: -71px -32px;
}
#start {
width: 30px;
height: 40px;
position: absolute;
top: 25px;
left: 350px;
background: url(img/player_bg.png);
background-position: -112px 0px;
opacity: 0.7;
}
#start:hover {
background-position: -112px -42px;
}
#downmusic {
width: 30px;
height: 30px;
position: absolute;
top: 30px;
left: 440px;
background: url(img/player_bg.png);
background-position: -151px 0px;
opacity: 0.7;
}
#downmusic:hover {
background-position: -151px -32px;
}
#mute{
width: 30px;
height: 30px;
position: absolute;
top: 30px;
}
video{
position: absolute;
top: 20px;
left: 540px;
width: 300px;
height: 50px;
}
#imgs {
width: 800px;
height: 200px;
position: absolute;
top: 100px;
left: 300px;
}
#img1 {
background: url(img/1.png) no-repeat;
position: absolute;
top: 55px;
}
#img2 {
background: url(img/2.png) no-repeat;
position: absolute;
top: 25px;
left: 200px;
}
#img3 {
background: url(img/3.png) no-repeat;
position: absolute;
top: 35px;
left: 400px;
}
#img4 {
background: url(img/4.png) no-repeat;
position: absolute;
top: 15px;
left: 600px;
}
#img1,#img2,#img3,#img4{
width: 100px;
height: 100px;
outline: none;
border-style:solid;
box-shadow: 1px 0px 20px 2px pink;
background-size: 100% 100%;
border-radius: 50%;
animation: imgrot 5s linear infinite paused;
}
@keyframes imgrot {
0% {
transform-origin: 50% 50%;
transform: rotate(0deg) scale(1);
}
50% {
transform-origin: 50% 50%;
transform: rotate(180deg) scale(1.3);
}
100% {
transform-origin: 50% 50%;
transform: rotate(360deg) scale(1);
}
}
#faster{
color: white;
}
#time{
color: white;
}
select{
width: 100px;
height: 40px;
font-size: 20px;
color: white;
border:1px solid pink;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 20px;
left: 550px;
}
</style>
html代码
<div id="container">
<div id="imgs">
<button type="button" id="img1" class="img" onclick="dorotate();"></button>
<button type="button" id="img2" class="img" onclick="dorotate();"></button>
<button type="button" id="img3" class="img" onclick="dorotate();"></button>
<button type="button" id="img4" class="img" onclick="dorotate();"></button>
</div>
<div id="btns">
<marquee id="title" direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1"></marquee>
<div id="upmusic" onclick="front()"></div>
<div id="start" onclick="isplay()"></div>
<div id="downmusic" onclick="next()"></div>
<div id="shrink" onclick="shrink1()"></div>
<select id="speed" onchange="dospeed(this);">
<option>倍速2</option>
<option>倍速1.3</option>
<option selected="selected">倍速1</option>
<option>倍速0.7</option>
</select>
<video controls="controls" loop="loop" hidden="hidden" controlsList="nodownload">
</div>
</div>
js代码
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script>
var musics = {"1":"泥鳅Niko - 胆小鬼","2":"刘惜君 - 我很快乐","3":"沈以诚 - 越来越不懂","4":"薛之谦 - 绅士"};
$(function(){
video.src="mp3/1.mp3";
});
var video = document.getElementsByTagName("video")[0];
var countmp3 = "1";
console.log(video.src);
//上一首
function front(){
//路径
if(countmp3=="1"){
countmp3="4";
}else{
countmp3=Number(countmp3)-1;
}
video.src="mp3/"+countmp3+".mp3";
countplay = false;
isplay();
};
//下一首
function next(){
//路径
if(countmp3=="4"){
countmp3="1";
}else{
countmp3=Number(countmp3)+1;
}
video.src="mp3/"+countmp3+".mp3";
countplay = false;
isplay();
};
var countplay=false;
//
function isplay(){
var s = video.src;
s=s.split("mp3/")[1];
s=s.split(".mp3")[0];
if(countplay){
pause();
$("#title").text("");
$(".img").css({"animation-play-state":"paused"});
$("#img"+s).css({"animation-play-state":"paused"});
countplay=false;
}else{
play();
$("#title").text(musics[s]);
$(".img").css({"animation-play-state":"paused"});
$("#img"+s).css({"animation-play-state":"running"});
countplay=true;
}
}
function play() {
video.play();
$("#start").hover(
function () {
$("#start").css("background-position","-342px -90px");
},
function () {
$("#start").css("background-position","-300px -90px");
}
);
$("#start").css("background-position","-300px -90px");
}
function pause() {
video.pause();
$("#start").hover(
function () {
$("#start").css("background-position","-112px -42px");
},
function () {
$("#start").css("background-position","-112px 0px");
}
);
$("#start").css("background-position","-112px 0px");
}
function dospeed(t){
var s = $("#speed").val();
s= s.split("倍速")[1];
video.playbackRate = s;
}
var countimg = false;
function dorotate() {
//清除其他旋转
$(".img").css({"animation-play-state":"paused"});
var str = event.path[0].id;
str = str.split("img")[1];
countmp3=str;
console.log(countmp3);
if(countimg){
$(event.path[0]).css({"animation-play-state":"paused"});
countimg = false;
video.src="mp3/"+str+".mp3";
isplay();
}else{
$(event.path[0]).css({"animation-play-state":"running"});
countimg = true;
video.src="mp3/"+str+".mp3";
isplay();
}
}
var flagshrink=false;
function shrink1(){
if(flagshrink){
$("#btns").animate({left: '0px'}, "slow");
$("#shrink").css("background-position","0px -12px");
flagshrink=false;
}else{
$("#btns").animate({left: '-680px'}, "slow");
$("#shrink").css("background-position","-22px -12px");
flagshrink=true;
}
}
</script>
界面图
功能
- 点击按钮播放，对应歌曲图标旋转
- 点击上一首/下一首，对应歌曲播放，对应歌曲图片旋转
- 歌曲播放时有歌曲名称的轮播
- 点击图片也能进行歌曲控制
- 隐藏控制区
注意
记得将歌曲，及图片替换路劲
}else{
$("#btns").animate({left: ‘-680px’}, “slow”);
$("#shrink").css(“background-position”,"-22px -12px");
flagshrink=true;
}
}
</script>
界面图
[外链图片转存中...(img-cPh7t18M-1566997179406)]
## 功能
> 1. 点击按钮播放，对应歌曲图标旋转
> 2. 点击上一首/下一首，对应歌曲播放，对应歌曲图片旋转
> 3. 歌曲播放时有歌曲名称的轮播
> 4. 点击图片也能进行歌曲控制
> 5. 隐藏控制区
## 注意
记得将歌曲，及图片替换路劲