QQ_music
一.正言
做一个类似于QQ空间的音乐播放器，纯前端技术，在这里给大家分享
二.项目
三 代码
主页面music.html
<!DOCTYPE html>
<html>
<head>
<title>java开发QQ音乐点歌系统</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: url("images/bg.jpg") no-repeat top center;font-size:12px;font-family:"微软雅黑"
;color:#666;}
img{border:0;}
.music{width:960px;height:250px;margin: 100px auto;background: url("images/banner_bg.png") no-repeat;
position: relative;}
.music ul li{list-style: none;position: absolute;}
.music ul .m_one{left:10px;top:30px;}
.music ul .m_one a img{border-radius:30px;}
.music ul .m_two{left:130px;top:83px;}
.music ul .m_two a img{border-radius:50px;}
.music ul .m_three{left:260px;top:60px;}
.music ul .m_three a img{border-radius:62px;}
.music ul .m_four{left:524px;top:121px;}
.music ul .m_foura img{border-radius:30px;}
.music ul .m_five{left:420px;top:20px;}
.music ul .m_five a img{border-radius:45px;}
.player{width:615px;height:115px;background:#000;position:absolute;bottom:10px;left:0;box-shadow:0px 0px 15px 0px #fff;}
.player .p_pic img{float:left;margin-top:12px;}
.player .p_pic p{font-size:18px;color:#fff;float:left; line-height: 115px;padding-left:10px;}
.player .p_btn{width:273px;height:88px;float:left;margin:23px 0 0 44px;}
.player .p_btn a{display:block;background:url("images/an.jpg") no-repeat;float:left;margin:5px 10px; }
.player .p_btn .b_pre{width:72px;height:76px;background-position:-201px -212px;display:block;}
.player .p_btn .b_pre:hover{background-position:-201px -421px;}
.player .p_btn .b_play{width:71px;height:77px;background-position:-306px -316px;display:block;}
.player .p_btn .b_play:hover{background-position:-410px -316px;}
.player .p_btn .b_next{width:70px;height:77px;background-position:-518px -209px;display:block;}
.player .p_btn .b_next:hover{background-position:-414px -423px;}
.p_packup{width:24px;height:124px;display:block;background:url("images/bk.png") no-repeat;float:right;cursor:pointer;}
.xz{-webkit-animation:andong 2s infinite linear;animation:andong 2s infinite linear;}
@-webkit-keyframes andong{from{transform:rotate(0deg);-webkit-transform:rotate(0deg)} to
{transform:rotate(360deg);-webkit-transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="music" >
<ul>
<li class="m_one">
<a href="#" title="如果能回到20岁那一年" class="items" data-url="mp3/1.mp3">
<img alt="ad" src="images/1.jpg" width="60"height="60">
</a>
</li>
<li class="m_two">
<a href="#" title="七友" class="items" data-url="mp3/2.mp3">
<img alt="ad" src="images/2.jpg" width="100"height="100">
</a>
</li>
<li class="m_three">
<a href="#" title="来生缘" class="items" data-url="mp3/来生缘.mp3">
<img alt="ad" src="images/3.jpg" width="124"height="124">
</a>
</li>
<li class="m_four">
<a href="#" title="慢慢" class="items" data-url="mp3/3.mp3">
<img alt="ad" src="images/4.jpg" width="60"height="60">
</a>
</li>
<li class="m_five">
<a href="#" title="" class="items" data-url="mp3/4.mp3">
<img alt="ad" src="images/5.jpg" width="90"height="90">
</a>
</li>
</ul>
</div>
<div class="player">
<div class="p_pic">
<img src="images/1.jpg" alt="" width="90" height="90"/>
<p class=".p_title">如果回到20岁那一年</p>
</div>
<div class="p_btn">
<a href="#" class="b_pre"></a>
<a href="#" class="b_play"></a>
<a href="#" class="b_next"></a>
</div>
<div class="p_packup"></div>
<div id="audiobox"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".p_packup").click(function(){
var width = $(".player").width() -20;
var left = $(".player").offset().left;
var n=1;
if(left<0) n=0;
$(".player").animate({left:-width*n});
});
//点击图片的播放代码
$(".items").click(function(){
//播放的曲目
var title= $(this).attr("title");
//播放的地址
var url = $(this).data("url");
//放入到播放器中，替换图片
var imgsrc = $(this).find("img").attr("src");
$(".p_pic").find("img").attr("src",imgsrc);
$(".p_pic").find(".p_title").text(title);
//重新初始化播放器
audioDom = createMp3(url);
audioDom.play();
//自动触发播放器按钮
$(".b_play").trigger("click");
$(".items").find("img").removeClass("xz");
$(this).find("img").addClass("xz");
});
$(function(){
//初始化播放器
var audioDom = createMp3("mp3/2.mp3");
audioDom.play();
});
//创建一个播放器
function createMp3(src){
var audioDom= document.createElement("audio");
//设置播放器的地址
audioDom.src=src;
//把播放器放入div容器中
document.getElementById("audiobox").innerHTML = "";
document.getElementById("audiobox").appendChild(audioDom);
return audioDom ;
}
</script>
</body>
</html>四.效果图
可旋转
