基于jQuery虾米音乐播放器样式代码
2023-09-27 14:28:19 时间
分享一款基于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="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>
相关文章
- jQuery的封装和扩展方式
- Asp.Net Mvc jQuery Unobtrusive Validation input tag必须是在form里面
- jQuery file upload上传图片的流程
- JQuery对 Select 的各种操作,所有代码作者亲测
- 猴子也能学会的jQuery第六期——jQuery事件(中)
- 在layui中使用内部jQuery的两种方法
- 『 高达 购物车案例 』jQuery + Java Script 全功能实现【超详细 代码分析】
- jquery div拖动效果示例代码
- jQuery基础与JavaScript与CSS交互-第五章
- jQuery-ui datepicker的使用演示代码
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
- jQuery的$(#id)和document.getElementById(id)的区别
- DOM对象与jquery对象有什么不同
- 《众妙之门——JavaScript与jQuery技术精粹》——2.4 进行代码复查的人员需要提供的信息
- 《jQuery Cookbook中文版》——1.3 用选择器和jQuery函数选择DOM元素
- 《jQuery UI 开发指南》——1.4 在HTML页面中应该引入哪些文件
- 《jQuery Mobile入门经典》—— 1.3 开发者的宝库
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4 示例:使用按钮集装饰单选框
- 《jQuery Cookbook中文版》——1.2 在DOM加载之后、整个页面加载之前执行jQuery/JavaScript代码
- jsp 普通变量与jQuery变量之间的转换
- IDEA中添加jQuery自动代码提示
- jQuery动画效果animate和scrollTop结合使用实例
- 如何书写高质量的jQuery代码
- [转载][jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
- VS CODE jQuery/easyui代码片段
- jquery 学习第一课之start
- 最最基层的ajax交互代码jquery+java之间的json跨域传递以及java的json代码返回
- 自己写的jQuery颜色插件