jQuery虾米音乐播放器样式代码
时间：2021-07-01 10:21:17 帮助过：0人阅读
jQuery虾米音乐播放器样式代码是一款基于jquery+html5实现的虾米音乐播放器源码下载。 <head> <title>jQuery虾米音乐播放器样式代码 - mgtv素材</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.sc.chinaz.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"> <div class="songLmain"> <div class="check"> <input class="checkIn" type="checkbox" select="0"> </div> <div class="start"> <em sonN="9">9</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"></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="10">10</em> </div> <div class="songBd"> <div class="col colsn">Icarus</div> <div class="col colcn">Ivan Torrent</div> <div class="col">Icarus</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="11">11</em> </div> <div class="songBd"> <div class="col colsn">th3 awak3n1ng</div> <div class="col colcn">Ivan Torrent</div> <div class="col">Icarus</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"></li> </ul> </div> </div> <div class="playFt"> <div class="track"> <div class="uiCheck"> <input class="checkAll" type="checkbox" select="0"> </div> <div class="uiItem"> <a href="#" class="itIcon itDele">删除</a> </div> <div class="uiItem"> <a href="#" class="itIcon itShou">收藏</a> </div> <div class="uiItem"> <a href="#" class="itIcon itJin">添加到精选集</a> </div> <div class="uiItem"> <a href="#" class="itIcon itMore">更多</a> </div> </div> </div> </div> <div class="mainOuther"> <div class="albumCover"> <a href="#"> <img src="images/2.jpg" id="canvas1"> </a> </div> <div class="albumSale"> <a href="#" class="asA"> <img src=""> </a> </div> <div id="lyr"></div> </div> </div> </div> <div class="bottom"> <div class="playerWrap"> <div class="playerCon"> <a href="#" class="pbtn prevBtn"></a> <a href="#" class="pbtn playBtn" isplay="0"></a> <a href="#" class="pbtn nextBtn"></a> <a href="#" class="mode"></a> </div> <div class="playInfo"> <div class="trackInfo"> <a href="#" class="songName">漂洋过海来看你(Live)</a> - <a href="#" class="songPlayer">刘明湘</a> <div class="trackCon"> <a href="#" class="tc1"></a> <a href="#" class="tc2"></a> <a href="#" class="tc3"></a> </div> </div> <div class="playerLength"> <div class="position">00:00</div> <div class="progress"> <div class="pro1"></div> <div class="pro2"> <a href="#" class="dian"></a> </div> </div> <div class="duration">03:35</div> </div> </div> <div class="vol"> <a href="#" class="pinBtn"></a> <div class="volm"> <div class="volSpeaker"></div> <div class="volControl"> <a href="#" class="dian2"></a> </div> </div> </div> </div> </div> </div> </body>