- 相關(guān)推薦
如何用jQuery仿蝦米音樂(lè)網(wǎng)完整源碼
如何用jQuery仿蝦米音樂(lè)網(wǎng)完整源碼？下面是由百分網(wǎng)小編為大家整理的PHP蝦米音樂(lè)網(wǎng)完整源碼跟大家分享，喜歡的可以收藏一下！了解更多詳情資訊，請(qǐng)關(guān)注應(yīng)屆畢業(yè)生考試網(wǎng)！
代碼展示：
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">
漂洋過(guò)海來(lái)看你(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和相關(guān)插件
<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>
相關(guān)操作按鈕js代碼，請(qǐng)看js/xiami.js
/*歌曲列表效果*/
$(".songList").hover(function() {
$(this).find(".more").show();
$(this).find(".dele").show();
},
function() {
$(this).find(".more").hide();
$(this).find(".dele").hide();
});
/*自定義滾動(dòng)條*/
$(".songUL").rollbar({
zIndex: 80
});
//$("#lyr").rollbar({zIndex:80});
/*復(fù)選框*/
$(".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仿蝦米音樂(lè)網(wǎng)完整源碼】相關(guān)文章：
java語(yǔ)言源碼解析05-27
什么是Jquery06-16
PHP文件上傳源碼分析10-13
Java中的String源碼分析09-07
從 JDK 源碼角度看 java 并發(fā)線程的中斷11-08
開(kāi)放源碼到底安不安全09-21
C語(yǔ)言實(shí)現(xiàn)的ls命令源碼分享10-18
jQuery Mobile + PHP實(shí)現(xiàn)文件上傳10-20
如何用ps染發(fā)07-02
如何用java重載09-05