仿酷狗html5手机音乐播放器主要部分代码

所属分类: 网页制作 / html5 阅读数: 939
收藏 0 赞 0 分享
HTML5作品,经测试,效果确定不错,遗憾的是只支持谷歌和苹果等以webkit核心的浏览器,网友体验的时候请使用谷歌等浏览器来运行,不然的话无法看到效果,不说了,看效果吧


复制代码
代码如下:

主要部分代码如下:
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
更多精彩内容其他人还在看

HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码,深度美化页面增进用户体验效果,需要的朋友可以参考下
收藏 0 赞 0 分享

html5实现图片转圈的动画效果——让页面动起来

这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

html5清空画布方法(三种)

本篇文章主要介绍了html5清空画布方法(三种),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5 文件域+FileReader 分段读取文件并上传到服务器

这篇文章主要介绍了HTML5 文件域+FileReader 分段读取文件并上传到服务器,需要的朋友可以参考下
收藏 0 赞 0 分享

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

这篇文章主要介绍了基于HTML5的WebGL实现json和echarts图表展现在同一个界面的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

解决HTML5手机端页面缩放的问题

这篇文章主要介绍了解决HTML5手机端页面缩放的问题的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML5新特性之语义化标签

HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于HTML5 Canvas的3D动态Chart图表的示例

这篇文章主要介绍了基于HTML5 Canvas的3D动态Chart图表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

HTML5添加禁止缩放功能

本文通过一段代码给大家介绍了HTML5添加禁止缩放功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

如何避免常见的6种HTML5错误用法

本文是小编给大家收藏整理的关于常见的6种HTML5错误用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多