基于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>

via:http://***/Article/44746

基于jQuery仿QQ音乐播放器网页版代码相关推荐

  1. jQuery仿QQ音乐播放器

    本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器,是前端技术的综合应用,所用素材来源于网络,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 在本例中用到的知识点如下,按jQuer ...

  2. 20230621----重返学习-仿QQ音乐播放器-静态页面的免费部署-vue2

    day-096-ninety-six-20230621-仿QQ音乐播放器-静态页面的免费部署-vue2 仿QQ音乐播放器 audio音频标签 audio标签 <audio src="i ...

  3. iOS开发手记-仿QQ音乐播放器动态歌词的实现

    最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路 歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...

  4. 八、jQuery的QQ音乐播放器

    项目资料 查看源码 在线Demo 基本框架及顶部布局 <div class="header"><h1 class="logo">< ...

  5. 基于vue的前端音乐播放器网页

    本着对vue的兴趣,试着用vue做了个仿照网易云样式的简单的音乐播放网页,用的是网易云的api,因为是抱着玩的心态做的,所以有些缺陷也就不完善了,写在博客上纪念一下. 发现音乐的界面,轮播图用了三秒定 ...

  6. 用jQuery实现qq音乐播放器

    折腾了很久,最终还是决定先放弃,继续学习jQuery后面的内容,做了有一大半吧,核心功能不想搞了,以后有时间再继续吧 贴代码: html: <!DOCTYPE html> <html ...

  7. iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)

    代码地址如下: http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该 ...

  8. 从零玩转jQuery之项目开发(QQ音乐播放器)

    QQ音乐播放器项目 大体效果如下: HTML结构分析: 一.页面布局 1.首先来看下HTML大体结构: <div class="header"></div> ...

  9. QQ音乐播放器-jQuery实现

    QQ音乐播放器 案例展示 案例实现的功能 静态页面的布局 歌曲信息的动态显示 鼠标悬停,功能按钮和文字高亮 歌曲信息的动态显示 歌曲播放 进度条显示和动态移动 纯净模式的模板设置和歌词写入 案例布局 ...

最新文章

  1. 鸿蒙是单线程还是多线程,鸿蒙 RT-Thread 两者之间究竟是不是竞争关系呢
  2. 【学习笔记】利润中心会计初识
  3. php的 静态变量,PHP之static静态变量详解
  4. Chrome保存mht网页文件的方法 – 无需任何插件,完美!
  5. SQL Server JSON:性能手册
  6. 由H3C高层变动对厂商认证的思考
  7. C#利用委托跨线程更新UI数据
  8. paip.验证码识别---序列号的反转
  9. NFC reader ( ISO 15693 ) NFC相关技术详解(附源代码)
  10. OSGEarth基于经纬度获取高程数据
  11. 阿里巴巴矢量字体库更改设置
  12. [干货]网页端、移动端导航设计模式全解
  13. 计算机adminstor用户不见了,Win10管理员账户不见了如何用Administrator登录
  14. 【SVPWM】SVPWM算法推导及其Simulink仿真(一)
  15. kNN分类算法伪代码最简python代码
  16. 深度学习远程服务器配置
  17. 嵌入式Linux开发教程:Linux常见命令(上篇)
  18. 2016 -Nginx的负载均衡 - 一致性哈希 (Consistent Hash)
  19. 好程序员云计算培训分享2020年云计算的发展趋势
  20. 背景色渐变处理-linear-gradient

热门文章

  1. 对接有赞平台获取订单信息接口Apijava后台报错问题
  2. 关于 imtra-mart 的 新研究
  3. 雨听 | 英语学习笔记(十三)~作文范文:创造一个和谐的家庭
  4. Mac 安装depot_tools
  5. 按广义表表示二叉树结构生成二叉树链表的算法
  6. 易语言 不支持html5,微凉模块可穿透框架,解决网页点击不了的问题
  7. 电商代运营是做什么的
  8. 电商运营的要点有哪些
  9. 二进制小数与整数与十进制小数和整数的互换
  10. 中国煤制油市场产能需求与发展策略规划报告2022版