自制音乐盒教程：自己做一个简单的音乐盒
自制音乐盒教程：自己做一个简单的音乐盒height: 250px;width: 960px;background-size: cover;}.banner{
CSS：
@charset "utf-8";
body{
background: url(../img/bg.gif) no-repeat;
background-size: cover;
}
.banner{
width: 960px;
height: 250px;
background: url(../img/m_bg.jpg) no-repeat;
margin: 80px;
opacity: 0.8;
box-shadow: 10px 15px 15px 1px black;
position: relative;
}
.banner ul li{
list-style: none;
display: inline-block;
position: absolute;
}
.banner ul li img{
border-radius: 50%;
cursor: pointer;
}
.m1{top: 30px; left:90px;}
.m2{top: 140px; left:160px;}
.m3{top: 67px; left:308px;}
.m4{top: 50px; left:500px;}
.m5{top: 160px; left:580px;}
/*图片旋转*/
@keyframes img_rotate
{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
/*动画执行的时间次数*/
.banner .img_rotate{
animation: img_rotate 2s infinite linear;
}
.music{
width: 550px;
height: 120px;
background: black;
position: fixed;
left: 0px;
bottom: 50px;
opacity: 0.8;
box-shadow: 10px 15px 15px 1px black;
}
.music .m_img{
margin-top: 15px;
margin-left: 10px;
float: left;
}
.music .m_text{
float: left;
color: white;
font-size: 20px;
font-weight: bold;
margin-top: 50px;
margin-left: 20px;
}
.music .m_btn{
float: left;
position: absolute;
left: 320px;
}
.music .m_btn a{
float: left;
width: 35px;
height: 35px;
background: url(../img/player_bg.png);
margin-top: 50px;
margin-left: 20px;
}
.music .m_btn .m_prev {background-position: -68px 0px;}
.music .m_btn .m_prev:hover {background-position: -68px -32px;}
.music .m_btn .m_play {background-position: -104px -5px;}
.music .m_btn .m_play:hover {background-position: -104px -47px;}
.music .m_btn .m_next {background-position: -145px 0px;}
.music .m_btn .m_next:hover {background-position: -145px -32px;}
.music .m_close{
float: right;
background: url(../img/player_bg.png);
width: 23px;
height: 120px;
margin-top: 2px;
cursor: pointer;
}
.music .m_btn .m_pause{background-position: -292px -93px;}
.music .m_btn .m_pause:hover{background-position: -334px -93px;}
.music .m_open{
background-position: -45px 0px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>爱尚音乐</title>
<link rel="stylesheet" href="css/music.css" />
</head>
<body>
<div class="banner">
<ul>
<li class="m1" datasrc="mp3/1.mp3" title="龙卷风-邓紫棋">
<img src="img/1.jpg" width="65" />
</li>
<li class="m2" datasrc="mp3/2.mp3" title="Sober-bigbang">
<img src="img/2.jpg" width="90" />
</li>
<li class="m3" datasrc="mp3/3.mp3" title="绅士-薛之谦">
<img src="img/3.jpg" width="119" />
</li>
<li class="m4" datasrc="mp3/4.mp3" title="杀手-林俊杰">
<img src="img/4.jpg" width="90" />
</li>
<li class="m5" datasrc="mp3/5.mp3" title="baby-justin bieber">
<img src="img/5.jpg" width="65" />
</li>
</ul>
</div>
<div class="music">
<div class="m_img">
<img src="img/1.jpg" width="90" />
</div>
<div class="m_text">龙卷风-邓紫棋</div>
<div class="m_btn">
<a href="#" class="m_prev" title="上一首"></a>
<a href="#" class="m_play" title="播放"></a>
<a href="#" class="m_next" title="下一首"></a>
</div>
<div class="m_close"></div>
<audio src="mp3/1.mp3" class="m_mp3"></audio>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/music.js"></script>
</body>
</html>
JS:
var index = 0;
var li = $(".banner ul li");
var img = $(".music .m_img img");
var text = $(".music .m_text");
var prev = $(".music .m_btn .m_prev");
var play = $(".music .m_btn .m_play");
var next = $(".music .m_btn .m_next");
var mp3 = $(".music .m_mp3");
var flag = false;
var close = true;
li.click(function(){
// console.log($(this).music());
index = $(this).index();
show();
});
function show(){
change_bg(index 1);
change_img_text(index 1);
change_btn_title();
img_rotate();
play_mp3();
}
function change_bg(idx){
$("body").css({
"background":"url(img/" idx "_bg.jpg) no-repeat"
"background-size": "cover"
});
}
function change_img_text(idx){
img.attr("src" "img/" idx ".jpg");//更换播放器图片//
text.html(li.eq(index).attr("title"));//获取li的title属性然后替换文字//
}
function change_btn_title() {
play.removeClass("m_play");//移除原有的播放样式//
play.addClass("m_pause");//添加新的暂停样式//
play.attr("title" "暂停");//更换title//
}
function img_rotate(){
li.children().removeClass("img_rotate");
li.eq(index).children().addClass("img_rotate");
}
function play_mp3(){
mp3.attr("src" li.eq(index).attr("datasrc"));
mp3.get(0).play();
flag = true;
}
play.click(function(){
if (flag){
mp3.get(0).pause();
li.eq(index).children().removeClass("img_rotate");
play.removeClass("m_pause").addClass("m_play").attr("title" "播放");
flag = false;
}else{
mp3.get(0).play();
li.eq(index).children().addClass("img_rotate");
play.removeClass("m_play").addClass("m_pause").attr("title" "暂停");
flag = true;
change_bg(index 1);
}
});
prev.click(function(){
index--;
if (0 > index){
index = li.length - 1;
}
show();
});
next.click(function(){
index ;
if (li.length-1 < index){
index = 0;
}
show();
});
$(".m_close").click(function(){
if(close){
$(this).addClass("m_open");
$(".music").animate({"left" : "-520px"} 800);
close = false;
}else{
$(this).removeClass("m_open");
$(".music").animate({"left" : "0px"} 800);
close = true;
}
});
js/jquery-3.3.1.min.js这个是一个js文件可在网上下载。
图片和音乐可以自己下载自己喜欢的音乐。
雪碧图：
