<html>
<head>
<title>jQuery虾米音乐播放器样式代码 - 网页模板</title>
<meta charset="utf-8">
<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>
</head>
<body>
<!--模糊画布-->
<div class="blur">
<canvas style="width:1366px;height:700px;opacity:0;" width="1366" height="700" id="canvas">
</div>
<div class="playerMain">
<div class="top">
<a href="#" class="logo"></a>
<div class="search">
<div type="submit" class="searchBtn"></div>
<input type="text" class="searchTxt">
</div>
<div class="mainNav">
<div class="tipLogin">
马上
<a href="#" class="loginA">登录</a>
</div>
<a href="#" class="myroom"></a>
</div>
</div>
<div class="middle">
<div class="mainWrap">
<div class="leftBar">
<ul class="menuUL">
<li class="menuLi cur">
<a href="#">
<i class="icon iplay"></i>
正在播放
</a>
</li>
<li class="menuLi">
<a href="#">
<i class="icon ihst"></i>
播放历史
</a>
</li>
<li class="menuLi">
<a href="#">
<i class="icon ishouc"></i>
我收藏的单曲
</a>
</li>
</ul>
<div class="collectOut">
<span class="colS">我创建的精选集</span>
<a href="#" class="colA"></a>
</div>
<div class="cellectList"></div>
<audio id="audio" src="http://zjdx1.www.moobnn.com/Files/DownLoad/sound1/201507/6065.mp3"></audio>
</div>
<div class="mainBody">
<div class="playHd">
<div class="phInner">
<div class="col">歌曲(50)</div>
<div class="col">演唱者</div>
<div class="col">专辑</div>
</div>
</div>
<div class="playBd">
<div class="scrollView">
<!-- <div class="scroll"></div> -->
<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>
<li class="songList">
<div class="songLmain">
<div class="check">
<input class="checkIn" type="checkbox" select="0">
</div>
<div class="start">
<em sonN="3">3</em>
</div>
<div class="songBd">
<div class="col colsn">Autobots Reunite</div>
<div class="col colcn">Steve Jablonsky</div>
<div class="col">《变形金刚4:绝迹重生》</div>
</div>
<div class="control">
<a class="cicon love"></a>
<a class="cicon more"></a>
<a class="cicon dele"></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="4">4</em>
</div>
<div class="songBd">
<div class="col colsn">Halo</div>
<div class="col colcn">Martin</div>
<div class="col">Halo Legends: Original Soundtrack</div>
</div>
<div class="control">
<a class="cicon love"></a>
<a class="cicon more"></a>
<a class="cicon dele"></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="5">5</em>
</div>
<div class="songBd">
<div class="col colsn">Pearl White Story</div>
<div class="col colcn">S.E.N.S</div>
<div class="col">君に届け 2ND SEASON オリジナル・サウンドトラック</div>
</div>
<div class="control">
<a class="cicon love"></a>
<a class="cicon more"></a>
<a class="cicon dele"></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="6">6</em>
</div>
<div class="songBd">
<div class="col colsn">break the sword of justice</div>
<div class="col colcn">梶浦由記</div>
<div class="col">NHKアニメーション 「ツバサ・クロニクル」 オリジナルサウンドトラック Future Soundscape I</div>
</div>
<div class="control">
<a class="cicon love"></a>
<a class="cicon more"></a>
<a class="cicon dele"></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="7">7</em>
</div>
<div class="songBd">
<div class="col colsn">The children</div>
<div class="col colcn">Ramin Djawadi</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>
<li class="songList">
<div class="songLmain">
<div class="check">
<input class="checkIn" type="checkbox" select="0">
</div>
<div class="start">
<em sonN="8">8</em>
</div>
<div class="songBd">
<div class="col colsn">Pacific Rim</div>
<div class="col colcn">Ramin Djawadi</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>
<li class="songList"