仿酷狗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,js)
Dec 12 HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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 header()函数使用说明
2008/07/10 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
prototype 1.5 & scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
js实现日期级联效果
2014/01/23 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
详解React 条件渲染
2020/07/08 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python中is和==的区别详解
2018/11/15 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python过滤序列元素的方法
2020/07/31 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏