经验分享程序开发文档资料数据资源其它资源

jQuery仿QQ音乐播放器网页版代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿QQ音乐播放器网页版代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery仿QQ音乐播放器网页版代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery仿QQ音乐播放器网页版代码</title>
<link rel="stylesheet" href="css/player.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/player.js"></script>

</head>
<body>

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

JS代码(player.js):

/** * Created by Administrator on 15-5-25. */
$(function(){
	//展开播放列表 $("#spansongnum1").click(function(){
	$("#divplayframe").show();
	$("#divplayframe").animate({
	opacity:'1'}
,250);
}
);
	//收起列表 $("#btnclose").click(function(){
	$("#divplayframe").animate({
	opacity:'0'}
,250,function(){
	$("#divplayframe").hide();
}
);
}
);
	//收起播放器 $("#btnfold").click(function(){
	var temp= $("#divplayframe").is(":hidden");
	//取到当前播放器显示栏的像素 var leftnum = $('#divplayer').css("left");
	var hidedivplayer = function(){
	//隐藏显示栏 $("#divplayer").animate({
	left:'-540px'}
,500,function(){
	$("#divplayer").addClass("m_player_folded");
}
);
}
if(leftnum=='0px'){
	//显示状态，改为隐藏 if(temp){
	hidedivplayer();
}
else{
	console.log("隐藏列表");
	//隐藏音乐列表 $("#divplayframe").animate({
	opacity:'0'}
,250,function(){
	$("#divplayframe").hide();
	hidedivplayer();
}
);
}
}
else{
	//否则就是隐藏状态，改为显示 $("#divplayer").animate({
	left:'0px'}
,500,function(){
	$("#divplayer").removeClass("m_player_folded");
}
);
}
}
);
}
);

CSS代码(player.css):

body{color:#8B8B8B;background-color:#FFF;font-size:12px;line-height:1.5em;font-family:Arial,Tahoma,"hiragino sans gb",Helvetica;}
*{padding:0px;margin:0px;}
.m_player{width:563px;height:115px;position:fixed;_position:absolute;bottom:10px;left:-541px;box-shadow:3px 3px 6px RGBA(0,0,0,.42);border-radius:4px;z-index:1;left:0}
.m_player .folded_bt{cursor:pointer;background:url(../img/player_bg.png?d=20150305173439) no-repeat 0 0;display:block;width:22px;height:115px;border:0;position:absolute;top:0;right:0}
.m_player_folded .folded_bt{background:url(../img/player_bg.png?d=20150305173439) no-repeat -23px 0}
.m_player_playing .folded_bt{background:url(../img/player_bg.png?d=20150305173439) no-repeat -46px 0;-webkit-animation-name:playing_button;-webkit-animation-duration:2.8s;-webkit-animation-timing-function:ease;-webkit-animation-delay:.6s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate}
@-webkit-keyframes playing_button{from{opacity:1}
to{opacity:.5}
}
.m_player .folded_bt span{display:none}
.m_player_dock{background-color:#000;width:541px;height:115px}
.m_player .music_info{height:111px}
.m_player .music_info .album_pic{display:block;width:90px;height:90px;margin:10px;float:left;overflow:hidden}
.m_player .music_info .album_pic img{width:90px;height:90px}
.m_player .music_info_main{font-family:tahoma;float:left}
.m_player .music_info p{margin:5px 0}
.m_player .music_info .music_name{color:#FFF;height:20px;width:300px;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.m_player .music_info .music_name span{float:left;max-width:210px;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis;_float:none}
.m_player .music_info .music_name .icon_radio{float:left;_float:none;*display:inline;_zoom:1;width:75px;height:20px;margin:0 0 0 10px;background:url(../img/player_bg.png?d=20150305173439) no-repeat -453px -55px;text-indent:-9999em;overflow:hidden;vertical-align:middle}
.m_player .music_info .singer_name{color:#828282;display:block;width:120px;height:20px;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.m_player .music_info .play_date{color:#595959;height:20px}
.m_player .music_info .music_op strong{background:url(../img/player_bg.png?d=20150305173439) no-repeat;display:inline-block;width:16px;height:15px;margin:0 2px 0 0;cursor:pointer}
.m_player .music_info .music_op strong span{display:none}
.m_player .music_info .music_op .btn_like{background-position:0 -127px}
.m_player .music_info .music_op .btn_share{background-position:-16px -127px}
.m_player .music_info .music_op .btn_kge{position:relative;background-position:-96px -127px}
.m_player .music_info .music_op .btn_down{background-position:-32px -127px}
.m_player .music_info .music_op .btn_like:hover{background-position:0 -145px}
.m_player .music_info .music_op .btn_share:hover{background-position:-16px -145px}
.m_player .music_info .music_op .btn_kge:hover{background-position:-81px -145px}
.m_player .music_info .music_op .btn_down:hover{background-position:-32px -145px}
.m_player .music_info .music_op .btn_liked,.m_player .music_info .music_op .btn_liked:hover{background-position:-80px -127px}
.m_player .music_info .music_op .kge_QRcode{position:absolute;top:-225px;left:-84px;z-index:100;padding:5px;display:none;width:176px;text-align:center;background-color:#383838}
.m_player .music_info .music_op .kge_QRcode em{font-size:12px;color:#fff;font-style:normal;line-height:2.4}
.m_player .music_info .music_op .kge_QRcode img{display:block;width:100%}
.m_player .music_info .music_op .kge_QRcode_arrow{position:absolute;bottom:-20px;left:82px;font-size:0;line-height:0;width:0;height:0;border-width:10px;border-color:#383838 transparent transparent transparent;border-style:solid dashed dashed dashed}
.m_player .music_info .music_op .btn_kge_hover .kge_QRcode{display:block}
.m_player .music_info .music_op .btn_kge:hover .kge_QRcode{display:block}
.m_player .music_info .music_op .kge_QRcode_logo{position:absolute;left:73px;top:73px;display:block;width:40px;height:40px;background:url(img/kge_qrcode.png?d=20150305173439) no-repeat}
.m_player .music_info .music_op .btn_like_n{background-position:0 -163px}
.m_player .music_info .music_op .btn_share_n{background-position:-16px -163px}
.m_player .music_info .music_op .btn_fav_n{background-position:-64px -163px}
.m_player .music_info .music_op .btn_down_n{background-position:-32px -163px}
.m_player .music_info .music_op .btn_del_n{background-position:-48px -163px;margin-right:0!important}
.m_player .music_info .music_op .btn_like_n,.m_player .music_info .music_op .btn_share_n,.m_player .music_info .music_op .btn_fav_n,.m_player .music_info .music_op .btn_down_n,.m_player .music_info .music_op .btn_del_n{cursor:default!important}
.m_player .bar_op{position:absolute;left:248px;top:43px;width:280px}
.m_player .bar_op strong{background:url(../img/player_bg.png?d=20150305173439) no-repeat;display:block;vertical-align:top;width:36px;height:28px;float:left;margin-top:7px;margin-left:3px;border:0;cursor:pointer}
.m_player .bar_op strong span,.m_player .playbar_cp_select strong span{display:none}
.m_player .bar_op .play_bt,.m_player .bar_op .pause_bt{width:42px;height:42px;margin-top:0}
.m_player .bar_op .play_bt{background-position:-105px 0}
.m_player .bar_op .play_bt:hover{background-position:-105px -42px}
.m_player .bar_op .pause_bt{background-position:-291px -88px}
.m_player .bar_op .pause_bt:hover{background-position:-333px -88px}
.m_player .bar_op .prev_bt{background-position:-69px 0}
.m_player .bar_op .prev_bt:hover{background-position:-69px -32px}
.m_player .bar_op .next_bt{background-position:-147px -0}
.m_player .bar_op .next_bt:hover{background-position:-147px -32px}
.m_player .bar_op .cycle_bt{background-position:-219px 0}
.m_player .bar_op .cycle_bt:hover{background-position:-219px -32px}
.m_player .bar_op .cycle_single_bt{background-position:-255px 0}
.m_player .bar_op .cycle_single_bt:hover{background-position:-255px -32px}
.m_player .bar_op .ordered_bt{background-position:-291px -32px}
.m_player .bar_op .ordered_bt:hover{background-position:-291px -60px}
.m_player .bar_op .unordered_bt{background-position:-327px -32px}
.m_player .bar_op .unordered_bt:hover{background-position:-327px -60px}
.m_player .playbar_cp_select{display:none;background-color:#383838;width:32px;padding:5px 0;position:absolute;left:376px;_left:379px;bottom:35px;_bottom:34px;border-radius:3px;box-shadow:3px 3px 6px RGBA(0,0,0,.42);z-index:12}
.m_player .playbar_cp_select strong{background:url(../img/player_bg.png?d=20150305173439) no-repeat;display:block;width:32px;height:22px;cursor:pointer}
.m_player .playbar_cp_select .cycle_bt{background-position:-376px -44px}
.m_player .playbar_cp_select .cycle_bt:hover{background-position:-376px -66px}
.m_player .playbar_cp_select .cycle_single_bt{background-position:-376px 0}
.m_player .playbar_cp_select .cycle_single_bt:hover{background-position:-376px -22px}
.m_player .playbar_cp_select .ordered_bt{background-position:-408px 0}
.m_player .playbar_cp_select .ordered_bt:hover{background-position:-408px -22px}
.m_player .playbar_cp_select .unordered_bt{background-position:-408px -44px}
.m_player .playbar_cp_select .unordered_bt:hover{background-position:-408px -66px}
.m_player .active_tip{font-size:0;background:url(../img/player_bg.png?d=20150305173439) no-repeat -376px -89px;display:block;width:17px;height:20px;position:absolute;right:3px}
.m_player .volume{display:inline-block;width:100px;height:24px;float:left;margin-top:10px;margin-left:8px}
.m_player .volume .volume_icon,.m_player .volume .volume_mute{vertical-align:-7px;*vertical-align:-7px;display:inline-block;width:24px;height:24px;cursor:pointer}
.m_player .volume .volume_icon{background:url(../img/player_bg.png?d=20150305173439) no-repeat -189px -3px}
.m_player .volume .volume_icon:hover{background-position:-189px -35px}
.m_player .volume .volume_mute{background:url(../img/player_bg.png?d=20150305173439) no-repeat -152px -63px}
.m_player .volume .volume_mute:hover{background-position:-189px -63px}
.m_player .volume .volume_regulate{font-size:0;background:url(../img/player_bg.png?d=20150305173439) no-repeat -291px -11px;display:inline-block;width:71px;height:11px;position:relative;cursor:pointer;*top:3px}
.m_player .volume .volume_bar{font-size:0;background:url(../img/player_bg.png?d=20150305173439) no-repeat -291px 0;display:inline-block;height:11px;position:absolute}
.m_player .volume .volume_op{background:url(../img/player_bg.png?d=20150305173439) no-repeat -366px 0;font-size:0;width:6px;height:11px;position:absolute;top:0}
.m_player .adjust_volume .volume_bar{background:url(../img/player_bg.png?d=20150305173439) no-repeat -291px -22px}
.m_player .adjust_volume .volume_op{background:url(../img/player_bg.png?d=20150305173439) no-repeat -366px -16px}
.m_player .player_bar{font-size:0;width:541px;height:4px;position:absolute;bottom:0;left:0}
.m_player .player_bg_bar{width:100%;background:#323232;font-size:0;height:4px;position:absolute;bottom:0;left:0;z-index:1;cursor:pointer}
.m_player .download_bar{background:#2c4838;font-size:0;height:4px;position:absolute;bottom:0;left:0;z-index:2;cursor:pointer}
.m_player .play_current_bar{position:absolute;background:#0cc65b;font-size:0;display:block;height:4px;z-index:3;cursor:pointer}
.m_player .player_bar .progress_op{display:block;width:7px;height:6px;background:url(../img/progress_op.png?d=20150305173439) no-repeat;position:absolute;z-index:3;top:-1px;cursor:pointer;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="//imgcache.qq.com/mediastyle/musicprotal/img/progress_op.png");_background:none;cursor:pointer}
.time_show{width:50px;height:24px;position:absolute;z-index:3}
.time_show p{height:17px;line-height:17px;color:#fff;border:solid 1px #666;background:#2f2f2f;-webkit-text-size-adjust:none;font-size:10px;text-align:center;font-family:Arial,Helvetica}
.time_show .icon_arrow_foot{display:block;width:13px;height:7px;position:relative;top:-1px;overflow:hidden;left:17px}
.time_show .icon_arrow_foot .foot_border{width:0;height:0;overflow:hidden;font-size:0;display:inline-block;border-width:7px;border-color:#666 transparent transparent transparent;border-style:solid dashed dashed dashed;position:absolute;top:-1px}
.time_show .icon_arrow_foot .foot_arrow{width:0;height:0;overflow:hidden;font-size:0;display:inline-block;border-width:5px;border-color:#2f2f2f transparent transparent transparent;border-style:solid dashed dashed dashed;position:absolute;top:-1px;left:2px}
.m_player .open_list{background:url(../img/player_bg.png?d=20150305173439) no-repeat -222px -97px;display:inline-block;width:47px;height:28px;border:0;position:absolute;top:0;right:61px;cursor:pointer}
.m_player .open_list span{color:#FFF;font-family:tahoma;font-size:11px;line-height:28px;display:inline-block;text-align:center;width:24px;height:28px;margin-left:23px}
.m_player .radio_list_button{width:20px;background:url(../img/player_bg.png?d=20150305173439) no-repeat -222px -97px;display:inline-block;height:28px;border:0;position:absolute;top:0;right:61px;cursor:pointer}
.m_player .radio_list_button span{display:none}
.m_player .btn_lyrics_disabled{display:block;width:14px;height:14px;background:url(../img/player_bg.png?d=20150305173439) no-repeat -452px 0;position:absolute;top:7px;right:37px;text-indent:-9999px;cursor:pointer}
.m_player .btn_lyrics_enabled{display:block;width:14px;height:14px;background:url(../img/player_bg.png?d=20150305173439) no-repeat -475px 0;position:absolute;top:7px;right:37px;text-indent:-9999px;cursor:pointer}
.m_player .play_list_frame{background-color:#1B1B1B;width:541px;height:507px;position:absolute;left:0;top:-507px;z-index:11;box-shadow:3px 3px 6px RGBA(0,0,0,.42);}
.m_player .play_list_frame ul{list-style:none;}
.m_player .play_list_title{background-color:#000;height:52px;position:relative;z-index:2}
.m_player .play_list_title h2{height:52px}
.m_player .play_list_title ul{*zoom:1}
.m_player .play_list_title ul::after{content:" ";display:block;height:0;font-size:0;overflow:hidden;clear:both}
.m_player .play_list_title ul li{float:left;position:relative}
.m_player .play_list_title ul li a{float:left;color:#FFF;font-size:18px;font-family:Microsoft Yahei;height:52px;line-height:52px;padding:0 20px}
.m_player .play_list_title ul li i{display:none}
.m_player .play_list_title ul .current a{background:#262626;text-decoration:none;}
.m_player .play_list_title ul .current i{display:block;width:15px;height:8px;background:url(../img/player_bg.png?d=20150305173439) no-repeat -504px -28px;position:absolute;left:50%;margin:0 0 0 -7px;top:52px}
.m_player .play_list_title .clear_list{color:#999;position:absolute;right:31px;top:18px;cursor:pointer}
.m_player .close_play_list{background:url(../img/player_bg.png?d=20150305173439) no-repeat -154px -97px;display:inline-block;width:47px;height:28px;border:0;position:absolute;top:0;right:38px;cursor:pointer;display:none}
.m_player .close_play_list span{color:#FFF;font-family:tahoma;font-size:11px;line-height:28px;display:inline-block;text-align:center;width:24px;height:28px;margin-left:23px}
.m_player .close_list{background:url(../img/player_bg.png?d=20150305173439) no-repeat -269px -97px;display:inline-block;width:20px;height:20px;position:absolute;top:3px;right:7px;cursor:pointer}
.m_player .play_list_scroll{width:15px;height:455px;position:absolute;top:53px;right:0;cursor:pointer}
.m_player .play_list_scrolling{background-color:#3B3B3B;width:9px;position:absolute;left:3px}
.m_player .play_list_scrolling:hover{background-color:#0cc65b}
.m_player .play_list{height:455px;overflow:hidden;position:relative;border-top:solid 1px #262626;z-index:1}
.m_player .play_list_point{color:#999;background-color:#1B1B1B;width:530px;height:150px;position:absolute;top:0;left:0;z-index:99}
.m_player .play_list_point div{background:url(../img/player_bg.png?d=20150305173439) no-repeat -757px 0;margin:20px 24px 0}
.m_player .play_list_point h4{font-size:14px;font-family:"Microsoft Yahei";margin:0 54px 26px;padding-top:13px}
.m_player .play_list_point p{line-height:18px}
.m_player .play_list_point p a{color:#0cc65b}
.m_player .play_list_main{width:529px;height:800px;position:absolute;left:0;z-index:100}
.m_player .single_list li{height:23px;margin:2px 0 3px;padding-left:20px;position:relative;border-top:solid 1px #1B1B1B}
.m_player .single_list li.play_hover{background-color:#000}
.m_player .single_list li strong{color:#595959;font-weight:normal}
.m_player .single_list li .music_name{color:#999;line-height:24px;display:inline-block;vertical-align:top;width:254px;cursor:pointer;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.m_player .single_list li .singer_name{line-height:24px;display:block;width:180px;cursor:pointer;position:absolute;top:0;left:290px;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.m_player .single_list li .play_time{line-height:24px;display:block;width:34px;display:block;position:absolute;top:0;right:17px}
.m_player .single_list li.play_current strong{color:#0cc65b}
.m_player .single_list li.play_wrong strong{color:#f00}
.m_player .single_list li.play_hover strong{color:#FFF}
.m_player .single_list li .list_cp{display:none}
.m_player .single_list li .list_cp strong{background-image:url(../img/player_bg.png?d=20150305173439);background-repeat:no-repeat;display:inline-block;width:16px;height:15px;margin-right:5px;cursor:pointer}
.m_player .single_list li .list_cp strong span{display:none}
.m_player .single_list li .btn_like{background-position:0 -127px}
.m_player .single_list li .btn_liked{background-position:-80px -127px}
.m_player .single_list li .btn_share{background-position:-16px -127px}
.m_player .single_list li .btn_fav{background-position:-64px -127px}
.m_player .single_list li .btn_down{background-position:-32px -127px}
.m_player .single_list li .btn_del{background-position:-48px -127px;margin-right:0!important}
.m_player .single_list li .btn_like:hover{background-position:0 -145px}
.m_player .single_list li .btn_share:hover{background-position:-16px -145px}
.m_player .single_list li .btn_fav:hover{background-position:-64px -145px}
.m_player .single_list li .btn_down:hover{background-position:-32px -145px}
.m_player .single_list li .btn_del:hover{background-position:-48px -145px}
.m_player .single_list li .btn_like_n{background-position:0 -163px}
.m_player .single_list li .btn_share_n{background-position:-16px -163px}
.m_player .single_list li .btn_fav_n{background-position:-64px -163px}
.m_player .single_list li .btn_down_n{background-position:-32px -163px}
.m_player .single_list li .btn_del_n{background-position:-48px -163px;margin-right:0!important}
.m_player .single_list li .btn_like_n,.m_player .single_list li .btn_share_n,.m_player .single_list li .btn_fav_n,.m_player .single_list li .btn_down_n,.m_player .single_list li .btn_del_n{cursor:default!important}
.m_player .single_list li.play_hover .list_cp{display:block;position:absolute;top:4px;right:17px}
.m_player .single_list li.play_hover .play_time{display:none}
.list_choose{padding:0 10px;position:absolute;border:solid 1px #3a3a3a;background-color:#0a0a0a;z-index:999}
.m_player .single_list li.move_here{height:23px;border-top:solid 1px #0cc65b}
.m_player .single_list li.move_last{border-top:solid 1px #0cc65b;height:0;font-size:0;overflow:hidden}
.m_player .single_list li.list_holder{background:#000}
.pop_fav_music_1,.pop_fav_music_2{padding-top:5px;position:absolute;z-index:98}
.pop_fav_music_2{padding:0 0 5px}
.pop_arrow{font-size:0;line-height:0;width:0;height:0;position:absolute}
.pop_fav_music_1 .pop_arrow{border-right:5px solid #1B1B1B;border-bottom:5px solid #0cc65b;border-left:5px solid #1B1B1B;top:0}
.pop_fav_music_2 .pop_arrow{border-top:5px solid #0cc65b;border-right:5px solid #1B1B1B;border-left:5px solid #1B1B1B;bottom:0}
.pop_fav_music_frame{background-color:#000;border-top:2px solid #0cc65b;border-right:1px solid #1B1B1B;border-bottom:1px solid #1B1B1B;border-left:1px solid #1B1B1B}
.pop_fav_music_2 .pop_fav_music_frame{border-top:1px solid #1B1B1B;border-bottom:2px solid #0cc65b}
.pop_fav_music_frame h5{color:#999;font-size:12px;margin:8px 10px 4px}
.pop_fav_music_main{width:122px;height:140px;position:relative;overflow:hidden}
.pop_fav_music_main ul{margin-bottom:8px;position:absolute;left:0}
.pop_fav_music_main li{height:24px;margin:1px 0;padding:0!important}
.pop_fav_music_main li a{display:block;line-height:24px;width:100px;height:24px;padding:0 10px;overflow:hidden;word-break:keep-all;word-wrap:keep-all;white-space:nowrap;table-layout:fixed;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.pop_fav_music_main li a:hover,.pop_fav_music_main li.current a{color:#000;background-color:#0cc65b}
.pop_fav_music_frame .pop_scroll{background-color:#000;width:8px;height:136px;position:absolute;top:1px;right:0;cursor:pointer}
.pop_fav_music_frame .pop_scrolling{background-color:#3B3B3B;width:6px;position:absolute;left:1px}
.pop_fav_music_frame .pop_scrolling:hover{background-color:#0cc65b}
.mod_tips{position:fixed;_position:absolute;padding:4px;z-index:2}
.mod_tips div{padding:4px 30px 4px 7px;background:#fffae3;border:solid 1px #eacaa5}
.mod_tips div h6{font-size:14px;font-weight:600;margin:0 0 4px}
.mod_tips div p{margin:0 0 4px}
.mod_tips div a{color:#0c8f44}
.mod_tips div a:hover{color:#05B600}
.mod_tips .close_tips{display:block;width:10px;height:10px;position:absolute;right:12px;top:12px;text-indent:-9999em;overflow:hidden;background:url(../img/icon_sprite.png?d=20150305173439) no-repeat -98px -109px}
.mod_tips i{display:block;width:9px;height:5px;position:absolute;font-size:0}
.mod_tips .icon_arrow_foot{left:17px;bottom:0;background:url(../img/icon_sprite.png?d=20150305173439) no-repeat -174px -128px}
.mod_tips .icon_arrow_top{left:17px;top:0;background:url(../img/icon_sprite.png?d=20150305173439) no-repeat -174px -124px}
.mod_tips .icon_arrow_left{width:5px;height:9px;left:0;top:13px;background:url(../img/icon_sprite.png?d=20150305173439) no-repeat -174px -124px}
.mod_tips .icon_arrow_right{width:5px;height:9px;right:0;top:13px;background:url(../img/icon_sprite.png?d=20150305173439) no-repeat -178px -124px}
.mod_tips .radio_cont{padding:8px 30px 4px 7px}
.mod_tips .radio_cont .btn_highlight,.mod_tips .radio_cont .btn_normal{display:inline-block;line-height:20px;line-height:21px\9;height:20px;text-align:center;font-size:12px;padding:0 8px;border-radius:3px}
.mod_tips .radio_cont .btn_highlight{color:#fff;border:1px solid #0c8f44;box-shadow:1px 2px 0 #c5dcc4;background:#0c8f44;margin-right:6px}
.mod_tips .radio_cont .btn_normal{color:#8b8b8b;border:1px solid #DDD;box-shadow:1px 2px 0 #F2F2F2;background:#fff}
.y_player_lyrics{position:absolute;width:249px;height:94px;right:-250px;top:0;z-index:2}
.lyrics_bg{position:absolute;left:0;top:0;z-index:-1;width:249px;height:115px;background:#000;border-radius:0 5px 5px 0;opacity:.8;box-shadow:3px 3px 6px RGBA(0,0,0,.42);filter:alpha(opacity=80)}
.close_lyrics{display:block;width:8px;height:8px;position:absolute;right:8px;top:9px;background:url(../img/player_bg.png?d=20150305173439) no-repeat -503px 0;cursor:pointer}
.y_player_lyrics .lyrics_text{height:93px;overflow:hidden;margin:10px 10px 0;text-align:center;color:#f5f5f5;line-height:24px;font-family:"Microsoft YaHei"}
.y_player_lyrics .lyrics_text p{}
.y_player_lyrics .lyrics_text .current{color:#0cc65b}
.lyrics_tips{}
.lyrics_tips div{padding:0;width:224px;height:58px;background:url(../img/bg_lyrics_tips.png?d=20150305173439) no-repeat}
.lyrics_tips div p{visibility:hidden}
.single_radio_cont{height:454px;background:#000 url(../img/radio_cont_bg.png?d=20150305173439) no-repeat 0 bottom;position:relative;z-index:2}
.single_radio_cont .single_radio_top{padding:40px 20px 20px;text-align:center}
.single_radio_cont .single_radio_top strong{color:#0cc65b;font-weight:normal}
.single_radio_list{width:540px;height:250px;overflow:hidden}
.single_radio_list ul{overflow:hidden;margin-left:-145px;-webkit-transition:.8s ease-in-out}
.single_radio_list li{float:left;margin:0 0 0 20px;width:250px;height:250px;position:relative;*display:inline;overflow:hidden}
.single_radio_list .first{background:#131313}
.single_radio_list li a,.single_radio_list li img{display:block;width:250px;height:250px;background:#000}
.single_radio_list li a:hover img,.single_radio_list li img{opacity:.5;filter:alpha(opacity="50")}
.single_radio_list li i{display:block;width:78px;height:78px;background-image:url(../img/player_button.png?d=20150305173439);_background-image:url(../img/player_button_ie6.png?d=20150305173439);background-repeat:no-repeat;position:absolute;left:200%;top:50%;margin:-39px 0 0 -39px;cursor:pointer}
.single_radio_list li a:hover{border:0 none}
.single_radio_list li a:hover i{left:50%}
.single_radio_list li .icon_radio_play{background-position:0 0}
.single_radio_list li .icon_radio_play:hover{background-position:0 -163px}
.single_radio_list li .icon_radio_pause{background-position:0 -78px}
.single_radio_list li .icon_radio_pause:hover{background-position:0 -241px}
.single_radio_list .current{-webkit-transition:.8s ease-in-out}
.single_radio_list .current img{opacity:1;filter:none}
.single_radio_info{width:250px;height:90px;margin:20px auto 0;position:relative}
.single_radio_info h3,.single_radio_info p{width:200px;text-align:center;margin:0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.single_radio_info h3{color:#fff;width:180px;height:30px;line-height:30px;margin:0 auto;font-size:14px}
.single_radio_info p{color:#828282;font-size:12px}
.single_radio_info .single_radio_like,.single_radio_info .single_radio_liked,.single_radio_info .single_radio_delete{display:block;width:24px;height:24px;background-image:url(../img/player_bg.png?d=20150305173439);background-repeat:no-repeat;position:absolute;top:5px}
.single_radio_info .single_radio_like{background-position:-563px 0;left:0}
.single_radio_info .single_radio_liked{background-position:-534px 0;left:0}
.single_radio_info .single_radio_delete{background-position:-534px -28px;right:0;top:3px}
.single_radio_tip{width:277px;height:155px;position:absolute;left:10px;top:-155px;background:url(../img/player_tip.png?d=20150305173439) no-repeat;_background:url(../img/player_tip_ie6.png?d=20150305173439) no-repeat;z-index:9999}
.single_radio_tip .close_tips{display:block;width:10px;height:10px;position:absolute;top:10px;right:10px}
.mini_version .play_list_frame{height:390px;top:-390px}
.mini_version .play_list,.mini_version .play_list_scroll{height:338px}
.mini_version .single_radio_cont .single_radio_top{padding:20px}
.mini_version .single_radio_cont .single_radio_list li{width:200px;height:200px;margin-left:22px}
.mini_version .single_radio_list{height:200px}
.mini_version .single_radio_list ul{margin-left:-125px}
.mini_version .single_radio_list li a,.mini_version .single_radio_list li img{width:200px;height:200px}
#CssGaga{content:"150305173439,emu,333"}
/* |xGv00|db23072332ba9e72e88d9a47837cbdb8 */
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
112.14 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
112.14 KB
立即下载
车香淑
了解
打赏作者 鼓励作者
Html Js 播放器
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章