仿酷狗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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
CSS变量实现主题切换的方法
Jun 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中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
js验证密码强度解析
2020/03/18 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python脚本实现虾米网签到功能
2016/04/12 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python读写docx文件的方法
2018/05/08 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python speech模块的使用方法
2020/09/09 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
美国折扣网站:jClub
2017/08/07 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
德劲DE1108畅想
2021/04/22 无线电
为Centos安装指定版本的Docker
2022/04/01 Servers
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python