腾讯QQ音乐点歌系统
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>腾讯QQ音乐点歌系统---eagle天堂盲鹰</title>
<meta name="Keywords" content="关键字,关键字">
<meta name="description" content="">
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;font-family:"微软雅黑",color:#666;}
/\*start music\*/
#music{width:960px;height:250px;background:url("images/banner_bg.jpg");margin:50px auto 0px;position:relative;}
#music ul li{width:65px;height:65px;list-style:none;}
#music ul li.m1{width:65px;height:65px;position:absolute;left:10px;top:50px;}
#music ul li.m2{width:100px;height:100px;position:absolute;left:150px;top:90px;}
#music ul li.m3{width:120px;height:120px;position:absolute;left:307px;top:65px;}
#music ul li.m4{width:90px;height:90px;position:absolute;left:475px;top:20px;}
#music ul li.m5{width:65px;height:65px;position:absolute;left:585px;top:160px;}
#music ul li img{border-radius:50%;}
#music ul li img.xz{-webkit-animation:zq 2s infinite linear;}
@-webkit-keyframes zq{
from{transform:rotate(0deg);-webkit-animation:rotate(0deg);}
to{transform:rotate(360deg);-webkit-animation:rotate(360deg);}
}
/\*music end\*/
/\*start musicBut\*/
#musicBut{width:560px;height:116px;background:#000;position:fixed;left:-10px;bottom:100px;border-radius:5px;}
#musicBut .pic{width:90px;height:90px;float:left;margin-top:13px;font-size:20px;}
#musicBut .txt{width:220px;height:90px;float:left;margin-top:13px;line-height:90px;color:#FFF;text-indent:10px;
font-size:20px;}
#musicBut .but{width:130px;height:36px;float:left;margin-top:40px;}
#musicBut .close{width:23px;height:116px;float:right;background:url("images/player_bg.png");}
#musicBut .but a{width:23px;height:38px;display:block;float:left;margin:0 10px;}
#musicBut .but a.prev{background:url("images/player_bg.png") -76px 0px;}
#musicBut .but a.play{background:url("images/player_bg.png") -115px 0px;}
#musicBut .but a.pause{background:url("images/player_bg.png") -300px -90px;}
#musicBut .but a.next{background:url("images/player_bg.png") -156px 0px;}
#musicBut .but a.prev:hover{background:url("images/player_bg.png") -76px -32px;}
#musicBut .but a.play:hover{background:url("images/player_bg.png") -115px -42px;}
#musicBut .but a.pause:hover{background:url("images/player_bg.png") -342px -90px;}
#musicBut .but a.next:hover{background:url("images/player_bg.png") -156px -32px;height:30px;}
/\*musicBut end\*/
</style>
</head>
<body>
<!--start music-->
<div id="music">
<ul>
<li class="m1" dataSrc="mp3/1.mp3" title="烛光里的妈妈"><img src="images/1.jpg" width="65" height="" alt="65"/></li>
<li class="m2" dataSrc="mp3/2.mp3" title="当你老了"><img src="images/2.jpg" width="100" height="" alt="100"/></li>
<li class="m3" dataSrc="mp3/3.mp3" title="母亲"><img src="images/3.jpg" width="120" height="" alt="120"/></li>
<li class="m4" dataSrc="mp3/4.mp3" title="相亲相爱一家人"><img src="images/4.jpg" width="90" height="" alt="90"/></li>
<li class="m5" dataSrc="mp3/5.mp3" title="壮志雄心"><img src="images/5.jpg" width="65" height="" alt="65"/></li>
</ul>
</div>
<!--music end-->
<!\-\- start musicBut-->
<div id="musicBut">
<div class="pic"><img src="images/1.jpg" width="90" height="90" alt=""/></div>
<div class="txt">烛光里的妈妈</div>
<div class="but">
<a href="javascript:void(0);" class="prev"></a>
<a href="javascript:void(0);" class="play"></a>
<a href="javascript:void(0);" class="next"></a>
</div>
<div class="close"></div>
</div>
<!--musicBut end-->
<audio id="myMusic" src="mp3/1.mp3"></audio>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var audio = $("#myMusic").get(0);
var mp3Src = "";
var mark = 0;
var pk = 0;
var _index = 0;
var imgSrc = "";
var mp3Title = "";
$("#music ul li").click(function() {
_index = $(this).index();
$(this).find("img").addClass("xz").parent().siblings("li").find("img").removeClass("xz");
mp3Src = $(this).attr("dataSrc");
$("#myMusic").attr("src", mp3Src);
imgSrc = $(this).find("img").attr("src");
$("#musicBut .pic img").attr("src", imgSrc);
mp3Title = $(this).attr("title");
$(".txt").text(mp3Title);
$("a.play").addClass("pause");
pk = 1;
audio.play();
});
$("#musicBut .close").click(function() {
if (mark == 0) {
$("#musicBut").animate({"left":"-537px"}, 500);
mark = 1;
} else {
$("#musicBut").animate({"left":"0px"}, 500);
mark = 0;
}
});
$("a.play").click(function() {
if (pk == 0) {
audio.play();
$(this).addClass("pause");
$("#music ul li").eq(_index).find("img").addClass("xz");
pk = 1;
} else {
audio.pause();
$(this).removeClass("pause");
$("#music ul li").find("img").removeClass("xz");
pk = 0;
}
});
$(".next").click(function() {
_index++;
if (_index > 4) {
_index = 0;
}
changeMusic(_index);
});
$(".prev").click(function() {
_index--;
if (_index < 0) {
_index = 4;
}
changeMusic(_index);
});
function changeMusic(_index) {
mp3Title = $("#music ul li").eq(_index).attr("title");
$(".txt").text(mp3Title);
mp3Src = $("#music ul li").eq(_index).attr("dataSrc");
imgSrc = $("#music ul li").eq(_index).find("img").attr("src");
$("#myMusic").attr("src", mp3Src);
$("#musicBut .pic img").attr("src", imgSrc);
$("#music ul li").eq(_index).find("img").addClass("xz").parent().siblings().find("img").removeClass("xz");
$("a.play").addClass("pause");
pk = 1;
audio.play();
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/02/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读