仿酷狗html5手机音乐播放器主要部分代码


Posted in HTML / CSS onMay 15, 2013

HTML5作品,经测试,效果确定不错,遗憾的是只支持谷歌和苹果等以webkit核心的浏览器,网友体验的时候请使用谷歌等浏览器来运行,不然的话无法看到效果,不说了,看效果吧
仿酷狗html5手机音乐播放器主要部分代码

复制代码
代码如下:

主要部分代码如下:
function ZzxMusic(){
var aa={};
//模块设置
var setting = {
newSong:{'target':'newSong','type':'1','firstCount':6,'Count':5},
songCharts:{'target':'newSong','type':'1','firstCount':2,'Count':4},
singer:{'target':'newSong','type':'1','firstCount':8,'Count':7},
radioStation:{'target':'newSong','type':'1','firstCount':9,'Count':2}
};
//默认加载模块
aa.newSong = new Zzx(setting.newSong);
//模块初始化
$(".menu_tagList").children("li").bind('click',function(){
for(var i in setting){
if($(this).attr("id")==i){
if(typeof aa[i]==='undefined'){
aa[i] = new Zzx(setting[i]);
}else{
aa[i].init();
}
}
}
$(".menu_hover").removeClass("menu_hover");
$(this).addClass("menu_hover");
})
}
//实例化控制台
var myControl = new Control({
audio : document.getElementById("myMusic"), //播放器
playModeNode : $("#modeButton"), //模式选择按钮
playBtn : $("#playButton"), //主控按钮
playTitle : $("#musicTitle"), //歌曲TITLE容器
singerHead : $("#singerHead"), //歌曲插图容器
progressWrap : $("#progressWrap"), //歌曲进度条容器
progress : $("#progress"), //歌曲进度条
oWinObj : $("#oWindow"), //警告窗容器
allTimeNode : $("#totleTime"), //当前时间容器
currentTimeNode : $("#currentTime") //当前时间容器
});
ZzxMusic();

原文 www.jq-school.com

HTML / CSS 相关文章推荐
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 #HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 #HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 #HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 #HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 #HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 #HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 #HTML / CSS
You might like
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php中++i 与 i++ 的区别
2012/08/08 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
解析vue中的$mount
2017/12/21 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python使用django搭建web开发环境
2017/06/09 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python中作用域的深入讲解
2018/12/10 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
物流专业自荐信
2014/05/23 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
旷课检讨书500字
2014/10/14 职场文书
MySQL分库分表详情
2021/09/25 MySQL
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers