仿qq音乐列表

HTML

<div class="box">
    <div class="top">
        <span class="fl">
            <label>
                <input type="checkbox" id="allBtn"/>
                <em></em>
            </label>
            歌曲
        </span>
        <span class="fl">歌手</span>
        <span class="fl">专辑</span>
    </div>
    <ul>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox"  id="li1"/>
                    <em></em>
                    <i class="songName" title="像风一样">像风一样</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="薛之谦">薛之谦</span>
                <span class="album fl" title="像风一样">像风一样</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="爱你(Live)">爱你(Live)</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="林俊杰">林俊杰</span>
                <span class="album fl" title="梦想的声音第二季 第2期">梦想的声音第二季 第2期</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="爱如潮水(Live)">爱如潮水(Live)</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="GAI">GAI</span>
                <span class="album fl" title="蒙面唱将猜猜猜第二季 第9期">蒙面唱将猜猜猜第二季 第9期</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="文爱">文爱</i>
                    <i class="HQ">HQ</i>
                </span>
                <span class="singer fl" title="CG">CG</span>
                <span class="album fl" title="文爱">文爱</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="Sleep">Sleep</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="王源">王源</span>
                <span class="album fl" title="Sleep">Sleep</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="萌力觉醒">萌力觉醒</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="江苏泷">江苏泷</span>
                <span class="album fl" title="萌力觉醒">萌力觉醒</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="萌力觉醒">萌力觉醒</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="江苏泷">江苏泷</span>
                <span class="album fl" title="萌力觉醒">萌力觉醒</span>
            </label>
        </li>
        <li>
            <label>
                <span class="fl">
                    <input type="checkbox" />
                    <em></em>
                    <i class="songName" title="萌力觉醒">萌力觉醒</i>
                    <i class="SQ">SQ</i>
                </span>
                <span class="singer fl" title="江苏泷">江苏泷</span>
                <span class="album fl" title="萌力觉醒">萌力觉醒</span>
            </label>
        </li>
    </ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clearFix{
    display: block;
    clear: both;
    content: "";
}
i{
    font-style: normal;
}
span{
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.box{
    width: 735px;
    background: #fff;
    margin: 50px auto 0;
    padding: 30px 15px;
    position: relative;
}
.top{
    color: #444;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.top span:nth-of-type(1),
li span:nth-of-type(1){
    width: 290px;
}
.top span:nth-of-type(2),
.singer{
    width: 170px;
}
.top span:nth-of-type(3),
.album{
    width: 240px;
}
input{
    position: absolute;
    left: -99999999999px;
}
em{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #C0C0C0;
    vertical-align: middle;
    margin: 0 0 0 10px;
    color: limegreen;
    position: relative;
    font-style: normal;
}
input:checked+em{
    border: 1px solid limegreen;
}
input:checked+em:after{
    position: absolute;
    content:"\2714";
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
}
li{
    height: 40px;
    line-height: 40px;
    list-style: none;
    border-bottom: 1px solid #ccc;
}
.SQ,.HQ{
    display: inline-block;
    padding: 0 3px;
    height: 12px;
    line-height: 12px;
    font-size: 12px;
    border-radius: 3px;
}
 .SQ{
    border: 1px solid orangered;
    color: orangered;
}
.HQ{
    border: 1px solid limegreen;
    color: limegreen;
}
li label{
    display: block;
    width: 100%;
    height: 100%;
}

JS

var oUl=document.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var aInput=oUl.getElementsByTagName("input");
var allBtn=document.getElementById("allBtn");
var num=0;
 
for (var i=0;i<aInput.length;i++) {
    //鼠标移入
    aLi[i].onmouseover=function(){
        this.style.background="rgba(0,0,0,.1)";
    }
    //鼠标移出
    aLi[i].onmouseout=function(){
        this.style.background="";
    }
     
    //鼠标点击
    aInput[i].index=i;
    aInput[i].onclick=function(){
        //格式化
        for (var i=0;i<aInput.length;i++) {
            aLi[i].style.background="";
            aLi[i].onmouseout=function(){
                this.style.background="";
            }
        }
        //判断选中状态，选中num加1，否则减1
        if(this.checked){
            num++;
            aLi[this.index].style.background="rgba(0,0,0,.1)";
            aLi[this.index].onmouseout=null;
        }else{
            num--;
        }
        //判断选中个数
        if(num==aInput.length){
            allBtn.checked=true;
        }else{
            allBtn.checked=false;
        }
    }
}
 
//全选按钮
allBtn.onclick=function(){
    if(this.checked){
        num=aInput.length;
        for (var i=0;i<aInput.length;i++) {
            aInput[i].checked=true;
        }
    }else{
        num=0;
        for (var i=0;i<aInput.length;i++) {
            aInput[i].checked=false;
        }
    }
}