你的位置:首页 > Java教程

[Java教程]基于jQuery虾米音乐播放器样式代码

分享一款基于jQuery虾米音乐播放器样式代码。这是一款基于jquery+html5实现的虾米音乐播放器源码下载。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<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 ></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>

via:http://www.w2bc.com/article/50094