基于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 class="scroll"></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="data: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
基于jQuery虾米音乐播放器样式代码的更多相关文章
- Android基于发展Service音乐播放器
这是一个基于Service组件的音乐播放器,程序的音乐将会由后台的Service组件负责播放,当后台的播放状态改变时,程序将会通过发送广播通知前台Activity更新界面:当用户单击前台Activit ...
- QT5:C++实现基于Multimedia的音乐播放器（序）
前段时间C++课设,决定做个播放器,于是参考了网上的代码后,做了个很简陋的音乐播放器(只写了MP3格式)出来,虽然功能甚少,但还是决定把过程记录一下. 成品如下图: 播放器功能: 上.下一首,音量控制 ...
- QT5:C++实现基于multimedia的音乐播放器（二）
今天接着上一篇来实现播放器的槽函数. 先来实现播放模式,槽函数如下: //播放模式 void Music::musicPlayPattern() { //z=++z%3; ) { //顺序播放 pla ...
- QT5:C++实现基于multimedia的音乐播放器（一）
上一篇里简略的描述了一下播放器的实现,这一篇开始具体描述一下过程. 环境配置:Qt Creator 打开Qt Creator,创建一个new project,项目名称随你喜欢(我的是MusicPlay ...
- BroadcastReceiver的实例----基于Service的音乐播放器之一
下面的程序开发了一个基于Service的音乐盒,程序的音乐将会由后台运行的Service组件负责播放,当后台的播放状态发生改变时,程序将会通过发送广播通知前台Activity更新界面:当用户单击前台A ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- Swift 3 :基于 AVAudioPlayer 的简单音乐播放器
2017.05.22 17:46* 字数 1585 阅读 5095评论 0喜欢 8赞赏 2 https://www.jianshu.com/p/4d5c257428a1 学习ios以来差不多接近两个月 ...
- html网页音乐播放器自带播放列表
基于网页的音乐播放器demo http://pan.baidu.com/s/1dDgm7HR 自己diy了一个手机端在线音乐播放器演示地址http://shanxi2014.com/zhuandiz ...
随机推荐
- POJ 1375 Intervals 光源投影【平面几何】
<题目链接> <转载于> 题目大意: 给一个光源点s,给一些圆,源点和s相切会形成阴影,求每一段阴影在横轴上的区间. 解题分析: 这道其实不需要点与圆切线的板子来求解,完全可以 ...
- 函数 y=x^x的分析
关于函数 y=xx的分析: 由图像得,y在负无穷大到0图像处处不连续,故y的定义域为(0,正无穷大): 故该函数不就是y=e^(lnxx)吗? 1.定义域:我们变形一下,y=e^(xlnx),显然是0 ...
- 使用Future停止超时任务
今天学了下多线程中超时任务的处理,这里和大家分享下,遇到了点问题没能解决,留下来希望大家帮我解疑啊. 在JAVA中停止线程的方法有多种,有一种是结合ExecutorService和Future的使用, ...
- AFP溢出攻击模块afp/loginext
AFP溢出攻击模块afp/loginext 在苹果Mac OS X 10.3.3及以前版本,AFP服务存在缓存区溢出漏洞CVE-2004-0430.利用该漏洞,用户可以基于LoginExt包执行任 ...
- 硬件篇之MMU
<背景> MMU即内存管理单元(Memory Manage Unit),是一个与软件密切相关的硬件部件,也是理解linux等操作系统内核机制的最大障碍之一.可以说,不懂MMU使很多人一直停 ...
- CSDN 个性 博客 栏目 自定义 栏目 酷炫 音乐 视频
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 自定义 栏目 酷炫 音乐 视频 ========
- bzoj2830: [Shoi2012]随机树
题目链接 bzoj2830: [Shoi2012]随机树 题解 q1好做 设f[n]为扩展n次后的平均深度 那么\(f[n] = \frac{f[n - 1] * (n - 1) + f[n - 1] ...
- 工具使用-----Jmeter教程 简单的压力测试
摘抄于http://www.cnblogs.com/TankXiao/p/4059378.html 以下是英文版的,中文版的也差不多的 Jmeter是一个非常好用的压力测试工具. Jmeter用来做 ...
- C++学习笔记43：STL
STL简介(standard Template Library) STL的基本组件:容器(container),迭代器(iterator),函数对象(function object) 算法(algor ...
- 正则表达式(特殊字符)/Xpath语法/CSS选择器
正则表达式(特殊字符) ^ 开头 '^b.*'----以b开头的任意字符 $ 结尾 '^b.*3$'----以b开头,3结尾的任意字符 * 任意长度(次数),≥0 ? 非贪婪模式,非贪婪模式尽可能少的 ...