Based on jQuery imitation QQ music player webpage code, jquery music player
The webpage code based on jQuery imitation QQ music player is a black style webpage QQ music player style code. As follows:
Download Online Preview source code
Implementation code.
Html code:
<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 = ""> </a> <div class =" music_info_main "> <p class =" music_name "title =" music your life "> <s Pan> music your life </span> </p> <p class = "singer_name" title = "QQ music"> QQ music </p> <p class = "play_date" id = "ptime"> </p> <p class = "music_op" style = "display: none; "> <strong class =" btn_like_n "title =" This song service is not available now "onClick =" MUSIC. event. cancelBubble (); "name =" myfav _ "mid =" "> <span> I Like It </span> </strong> <strong class =" btn_0000_n "title =" This song service is not currently available "onClick =" MUSIC. event. cancelBubble (); "> <span> share </span> </strong> <strong class =" btn_k Ge "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 class =" bar_op "> <strong title =" last song ([) "class =" prev_bt "onClick =" g_topPlayer.prev (); "> <span> previous </span> </strong> <strong title =" Play (P) "class =" play_bt "id =" btnplay "onClick =" g_topPlayer.play (); "> <span> play </span> </strong> <strong Title = "next (])" class = "next_bt" onClick = "g_topPlayer.next (); "> <span> next </span> </strong> <strong title =" list loop "class =" cycle_bt "id =" btnPlayway "onClick =" g_topPlayer.setPlayWay (); "> <span> List loop </span> </strong> <p class =" volume "title =" volume adjustment "> <span class =" volume_icon "id =" spanmute "title =" click to set to mute (M) "> </span> <span class =" volume_regulate "id =" spanvolume "> <span id =" spanvolumenum "> 0 </span> <span class =" v Olume_bar "style =" width: 0%; "id =" spanvolumebar "> </span> <span class =" volume_op "style =" left: 60%; "id =" spanvolumeop "> </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> <span class =" active_tip "id =" spanaddtips "style =" top: 0px; display: none; "> </span> <span title =" show playlist "clas S = "open_list" id = "spansongnum1"> <span> 0 </span> <button type = "button" class = "folded_bt" title = "click to collapse "id =" btnfold "> <span> click collapse/expand </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 "> <! -- Single FM modification --> <ul id = "tab_container" style = "width: 270px; "> <li id =" playlist_tab "class =" current "> <a href =" javascript :; "> playlist </a> <I> </li> <li id =" fm_tab "style =" display: none "> <a href =" javascript :; "> single radio list </a> <I> </li> </ul> <span id =" clear_list "class =" clear_list "onClick =" g_topPlayer.clearList (); "> clear the list </span> <strong title =" hide the playlist "class =" close_list "id =" btnclose "> </strong> </div> <div class = "Play_list" id = "divlistmain"> <! -- Prompt _ S --> <div class = "play_list_point" id = "divnulllist" style = "display: block; "> <div>
Via: http://www.w2bc.com/Article/44746