仿酷狗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 相关文章推荐
animation和transition的区别
Oct 12 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
html,css,javascript是怎样变成页面的
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
PHP对象Object的概念 介绍
2012/06/14 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
JQuery导航菜单选择特效
2016/04/11 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
创业培训计划书
2014/05/03 职场文书
借款担保书范文
2014/05/13 职场文书
2014年计生工作总结
2014/11/21 职场文书
企业党建工作总结2015
2015/05/26 职场文书
火烧圆明园观后感
2015/06/03 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android