仿酷狗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使用技巧5个
Apr 02 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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 动态多文件上传
2009/01/18 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php注销代码(session注销)
2012/05/31 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
javascript实现日历效果
2019/06/17 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
详解Python模块化编程与装饰器
2021/01/16 Python
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
50岁生日感言
2014/01/23 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《满井游记》教学反思
2014/02/26 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技