仿酷狗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实现的windows8开机加载动画
Dec 09 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
php array_slice函数的使用以及参数详解
2008/08/30 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php除数取整示例
2014/04/24 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
网站上面有这种切换效果
2006/06/26 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python的exec、eval使用分析
2017/12/11 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python将string转换到float的实例方法
2019/07/29 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python和php哪个容易学
2020/06/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
2015社区健康教育工作总结
2015/05/20 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
Python os和os.path模块详情
2022/04/02 Python