jQuery仿虾米音乐网完整源码免费下载

虾米音乐网完整源码跟大家分享了。

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"); 
    }; 
 
});
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录