- 相關推薦
如何用jQuery仿蝦米音樂網完整源碼
如何用jQuery仿蝦米音樂網完整源碼？下面是由百分網小編為大家整理的PHP蝦米音樂網完整源碼跟大家分享，喜歡的可以收藏一下！了解更多詳情資訊，請關注應屆畢業生考試網！
代碼展示：
html
<canvas style="width:1366px;height:700px;opacity:0;" width="1366" height="700" id="canvas">
歌曲列表
<ul class="songUL">
<li class="songList">
<div class="songLMain">
<div class="check">
<input class="checkIn" type="checkbox" select="0">
</div>
<div class="start">
<em sonN="1">
1
</em>
</div>
<div class="songBd">
<div class="col colsn">
盛夏光年
</div>
<div class="col colcn">
陳冰
</div>
<div class="col">
好聲音第三季
</div>
</div>
<div class="control">
<a class="cicon love">
</a>
<a class="cicon more" style="display:none">
</a>
<a class="cicon dele" style="display:none">
</a>
</div>
</div>
</li>
<li class="songList">
<div class="songLmain">
<div class="check">
<input class="checkIn" type="checkbox" select="0">
</div>
<div class="start">
<em sonN="2">
2
</em>
</div>
<div class="songBd">
<div class="col colsn">
漂洋過海來看你(Live)
</div>
<div class="col colcn">
劉明湘
</div>
<div class="col">
好聲音第三季
</div>
</div>
<div class="control">
<a class="cicon love">
</a>
<a class="cicon more">
</a>
<a class="cicon dele">
</a>
</div>
</div>
</li>
</ul>
引入jQuery和相關插件
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<link rel="stylesheet" type="text/css" href="css/xiami.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/xiami.js"></script>
相關操作按鈕js代碼，請看js/xiami.js
/*歌曲列表效果*/
$(".songList").hover(function() {
$(this).find(".more").show();
$(this).find(".dele").show();
},
function() {
$(this).find(".more").hide();
$(this).find(".dele").hide();
});
/*自定義滾動條*/
$(".songUL").rollbar({
zIndex: 80
});
//$("#lyr").rollbar({zIndex:80});
/*復選框*/
$(".checkIn").click(function() {
var s = $(this).attr("select");
if (s == 0) {
$(this).css("background-position", "-37px -710px");
$(this).attr("select", "1");
};
if (s == 1) {
$(this).css("background-position", "");
$(this).attr("select", "0");
};
});
$(".checkAll").click(function() {
var s = $(this).attr("select");
if (s == 0) {
$(this).css("background-position", "-37px -710px");
$(".checkIn[select='0']").css("background-position", "-37px -710px");
$(".checkIn[select='0']").attr("select", "1");
$(this).attr("select", "1");
};
if (s == 1) {
$(this).css("background-position", "");
$(".checkIn[select='1']").css("background-position", "");
$(".checkIn[select='1']").attr("select", "0");
$(this).attr("select", "0");
};
});
【如何用jQuery仿蝦米音樂網完整源碼】相關文章：
PHP+jQuery+Ajax仿淘寶多上傳按鈕單文件上傳08-13
java語言源碼解析05-27
什么是Jquery06-16
PHP文件上傳源碼分析04-16
Java中的String源碼分析05-17
PHP網絡購物車源碼04-08
開放源碼到底安不安全03-13
C語言實現的ls命令源碼分享06-01