仿酷狗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制作苹果风格键盘特效
Feb 26 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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
Terran建筑一览
2020/03/14 星际争霸
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
JS的反射问题
2010/04/07 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python中扩展包的安装方法详解
2017/06/14 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
PHP统计代码行数的小代码
2019/09/19 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
sort命令的作用和用法
2013/08/25 面试题
聘任书的写作格式及范文
2014/03/29 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
个人向公司借款协议书
2014/10/09 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Django中的JWT身份验证的实现
2021/05/07 Python