基於jQuery仿QQ音樂播放器網頁版代碼是一款黑色樣式風格的網頁QQ音樂播放器樣式代碼。效果圖如下：
實現的代碼。
html代碼：
<div class="m_player" id="divplayer" role="application" onselectstart="return false" style="left: 0px;"> <div class="m_player_dock" id="divsongframe"> <div class="music_info" id="divsonginfo"><a target="contentFrame" class="album_pic" title=""><img src="img/cover_mine_130.jpg" alt="" onerror="this.src='img/cover_mine_130.jpg'"></a><div class="music_info_main"><p class="music_name" title="音樂你的生活"><span>音樂你的生活</span></p><p class="singer_name" title="QQ音樂">QQ音樂</p><p class="play_date" id="ptime"></p><p class="music_op" style="display:none;"><strong class="btn_like_n" title="暫不提供此歌曲服務" onClick="MUSIC.event.cancelBubble();" name="myfav_" mid=""><span>我喜歡</span></strong><strong class="btn_share_n" title="暫不提供此歌曲服務" onClick="MUSIC.event.cancelBubble();"><span>分享</span></strong><strong class="btn_kge" onMouseOver="this.className='btn_kge btn_kge_hover';" onMouseOut="this.className='btn_kge';" style="z-index:100;display:none;" id="btnkge"></strong></p></div></div> <div class="bar_op"> <strong title="上一首( [ )" class="prev_bt" onClick="g_topPlayer.prev();"><span>上一首</span></strong> <strong title="播放(P)" class="play_bt" id="btnplay" onClick="g_topPlayer.play();"><span>播放</span></strong> <strong title="下一首( ] )" class="next_bt" onClick="g_topPlayer.next();"><span>下一首</span></strong> <strong title="列表循環" class="cycle_bt" id="btnPlayway" onClick="g_topPlayer.setPlayWay();"><span>列表循環</span></strong> <p class="volume" title="音量調節"> <span class="volume_icon" id="spanmute" title="點擊設為靜音(M)"></span> <span class="volume_regulate" id="spanvolume"> <span id="spanvolumenum">0</span> <span class="volume_bar" style="width:0%;" id="spanvolumebar"></span> <span class="volume_op" style="left:60%;" id="spanvolumeop"></span> </span> </p> </div> <p class="playbar_cp_select" id="divselect"> </p> <p class="player_bar"> <span class="player_bg_bar" id="spanplayer_bgbar"></span> <span class="download_bar" id="downloadbar" style="width: 0%;"></span> <span class="play_current_bar" style="width: 0%;" id="spanplaybar"></span> <span class="progress_op" style="left: 0%;" id="spanprogress_op"></span> </p> <div class="time_show" style="left:240px;bottom:8px;display:none;"> <p id="time_show"></p> <span class="icon_arrow_foot"><i class="foot_border"></i><i class="foot_arrow"></i></span> </div> </div> <span class="active_tip" id="spanaddtips" style="top:0px;display:none;"></span> <span title="展開播放列表" class="open_list" id="spansongnum1"><span>0</span></span> <button type="button" class="folded_bt" title="點擊收起" id="btnfold"><span>點擊收起/展開</span></button> <!--play list--> <div class="play_list_frame" id="divplayframe" style="display: none ;filter:alpha(opacity=0);opacity:0;"> <div class="play_list_title"> <!-- 單曲FM修改 --> <ul id="tab_container" style="width:270px;"> <li id="playlist_tab" class="current"><a href="javascript:;">播放列表</a><i></i></li> <li id="fm_tab" style="display:none"><a href="javascript:;">單曲電台列表</a><i></i></li> </ul> <span id="clear_list" class="clear_list" onClick="g_topPlayer.clearList();">清空列表</span> <strong title="收起播放列表" class="close_list" id="btnclose"></strong> </div> <div class="play_list" id="divlistmain"> <!--列表為空提示_S--> <div class="play_list_point" id="divnulllist" style="display: block;"> <div> <h4>您當前還未添加任何歌曲</h4> <p>您可以：</p> <p>在<a href="/y/static/index.html?pgv_ref=qqmusic.y.player" target="contentFrame">首頁</a>選擇試聽我們推薦的歌曲。</p> <p>在<a href="/y/static/singer/index/all_hot_1.html?pgv_ref=qqmusic.y.player" target="contentFrame">樂庫</a>中查找您想聽的歌曲。</p> </div> </div> <!-- 單曲FM修改 空列表--> <div class="play_list_point" id="divnullFMlist" style="display:none;"> <div> <h4>哎呀，這首歌和其他歌曲還不熟</h4> <p>你可以：</p> <p>換 另一首歌曲<span style="color:#9ae40a"> 重新發起單曲電台</span>。 </p><p>什么是單曲電台？</p> <p>當你聽到一首喜歡的歌曲，我們會針對這首歌曲，為你生成一批<span style="color:#9ae40a"> 你可能也喜歡的歌曲列表</span>, 並且根據你的反饋，不斷優化——所以聽得越多，為你推薦得越准噢！</p> <p></p> </div> </div> <!--列表為空提示_E--> <div class="play_list_main" id="divplaylist" style="display: none;"> <!-- 播放列表_S--> <div class="single_list" id="divsonglist" dirid="0"><ul></ul></div> <div id="divalbumlist" style="display:none;"> </div> </div> <div class="play_list_scroll" style="top:0px"><span id="spanbar" class="play_list_scrolling"></span></div> <!--單曲電台列表_S--> <div class="single_radio_cont" id="FM_container" style="display:none;"> <div class="single_radio_top"> <!-- a href="javascript:;" class="change_link"><i class="icon_change"></i>換一批</a --> <p>您正在收聽以“<strong id="FM_songname">好久不見-陳奕迅</strong>”生成的單曲電台。</p> </div> <div class="single_radio_list"> <ul id="single_radio_list" style="margin-left:-150px;"> <li class="first"></li> </ul> </div> <div class="single_radio_info" id="single_radio_info"> <a href="javascript:;" class="single_radio_like" title="喜歡"></a> <a href="javascript:;" class="single_radio_delete" title="刪除"></a> <h3></h3> <p></p> </div> </div> <!--單曲電台列表_E--> </div> </div> <!--歌詞內容--> <div class="y_player_lyrics" id="player_lyrics_pannel" style="display:none;"> <div class="lyrics_text" id="qrc_ctn"></div> <div class="lyrics_bg"></div> <span class="close_lyrics" id="closelrcpannel"></span> </div> <div class="single_radio_tip" id="single_radio_tip" style="display:none;"> <a href="javascript:;" class="close_tips"></a> </div> </div>