仿酷狗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的常见transformation图形变化用法小结
May 13 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
mongodb和php的用法详解
2019/03/25 PHP
JavaScript 参考教程
2006/12/29 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
js密码强度校验
2015/11/10 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
业务经理的岗位职责
2013/11/16 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
股份转让协议书
2014/04/12 职场文书
精神文明单位申报材料
2014/05/02 职场文书
企业环保标语
2014/06/10 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js