仿酷狗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 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 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
smarty模板局部缓存方法使用示例
2014/06/17 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
python如何生成各种随机分布图
2018/08/27 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
企业项目策划书
2014/01/11 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
手术室护士个人总结
2015/02/13 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
Go语言编译原理之源码调试
2022/08/05 Golang