分享一款基于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虾米音乐播放器样式代码的更多相关文章

  1. Android基于发展Service音乐播放器

    这是一个基于Service组件的音乐播放器,程序的音乐将会由后台的Service组件负责播放,当后台的播放状态改变时,程序将会通过发送广播通知前台Activity更新界面:当用户单击前台Activit ...

  2. QT5:C++实现基于Multimedia的音乐播放器（序）

    前段时间C++课设,决定做个播放器,于是参考了网上的代码后,做了个很简陋的音乐播放器(只写了MP3格式)出来,虽然功能甚少,但还是决定把过程记录一下. 成品如下图: 播放器功能: 上.下一首,音量控制 ...

  3. QT5:C++实现基于multimedia的音乐播放器（二）

    今天接着上一篇来实现播放器的槽函数. 先来实现播放模式,槽函数如下: //播放模式 void Music::musicPlayPattern() { //z=++z%3; ) { //顺序播放 pla ...

  4. QT5:C++实现基于multimedia的音乐播放器（一）

    上一篇里简略的描述了一下播放器的实现,这一篇开始具体描述一下过程. 环境配置:Qt Creator 打开Qt Creator,创建一个new project,项目名称随你喜欢(我的是MusicPlay ...

  5. BroadcastReceiver的实例----基于Service的音乐播放器之一

    下面的程序开发了一个基于Service的音乐盒,程序的音乐将会由后台运行的Service组件负责播放,当后台的播放状态发生改变时,程序将会通过发送广播通知前台Activity更新界面:当用户单击前台A ...

  6. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  7. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  8. Swift 3 :基于 AVAudioPlayer 的简单音乐播放器

    2017.05.22 17:46* 字数 1585 阅读 5095评论 0喜欢 8赞赏 2 https://www.jianshu.com/p/4d5c257428a1 学习ios以来差不多接近两个月 ...

  9. html网页音乐播放器自带播放列表

    基于网页的音乐播放器demo  http://pan.baidu.com/s/1dDgm7HR 自己diy了一个手机端在线音乐播放器演示地址http://shanxi2014.com/zhuandiz ...

随机推荐

  1. iOS开发安全

    这篇文章之前自己在公司的技术分享学院发表了.现在发到自己的博客上. 现在很多iOS的app没有做任何的安全防范措施.今天我们就聊聊iOS开发人员平时怎么做才更安全. 一.网络方面 用抓包工具可以抓取手 ...

  2. Android应用开发-数据存储和界面展现(一)

    常见布局 相对布局(RelativeLayout) 相对布局下控件默认位置都是左上角(左对齐.顶部对齐父元素),控件之间可以重叠 可以相对于父元素上下左右对齐,相对于父元素水平居中.竖直居中.水平竖直 ...

  3. IdentityServer4-端点

    一.发现端点 二.授权端点 三.令牌端点 四.UserInfo端点 五.Introspection端点 六.撤销端点 七.结束会话端点 一.发现端点 发现端点可用于检索有关IdentityServer ...

  4. 专业方向系列-00-Python与有限元初探

    案例1 给出4个弹簧的劲度系数,离散后,求其总的刚度矩阵. 代码: import numpy as np k1, k2, k3, k4 = 500, 250, 2000, 1000 ki = np.a ...

  5. 潭州课堂25班：Ph201805201 并发（通信） 第十三课 (课堂笔记）

    from multiprocessing import Process # 有个 url 列表 ,有5个 url ,一次请求是1秒,5个5秒 # 要求1秒把 url 请求完, a = [] # 在进程 ...

  6. angularJS常用的内置方法

    angular.lowercase(aaa); angular.uppercase(bbb); angular.isString(); angular.isNumber(); angular.isAr ...

  7. 喵哈哈村的魔法考试 Round #10 (Div.2) 题解

    喵哈哈村与哗啦啦村的大战(一) 最大值就是全部+3,最小值就是全部-3,注意不能降为负数. #include<bits/stdc++.h> using namespace std; con ...

  8. UITableView滚动优化(RunLoop)

    链接: 利用RunLoop优化tableView RunLoop方式优化加载tableview RunLoop总结:RunLoop的应用场景(三)滚动视图流畅性优化 TableView加载图片的优化逻 ...

  9. print2flash文档在线预览应用（java,.net）

    一.背景 前段时间,LZ的boss突然给了出了这样一个需求:将原项目中的所有文章关联的附件TXT.PDF.office相关文件全部以flash的形式在网页上进行展示,便于预览.看似简单的需求,整个研发 ...

  10. Javascript中快速退出多重循环的技巧

    在双重循环或多重循环中判断条件,条件符合时跳出整个嵌套循环体是常见的程序逻辑.在Javascript中有哪些跳出的方法呢?楼主简单整理了一下. 一. 使用多个break语句跳出 var breaked ...