仿酷狗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动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
php获取文件大小的方法
2014/02/26 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Python2和Python3中print的用法示例总结
2017/10/25 Python
浅谈python常用程序算法
2019/03/22 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python爬虫之自制英汉字典
2019/06/24 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
医院辞职信范文
2014/01/17 职场文书
医学生个人求职信范文
2014/02/07 职场文书
企业元宵节主持词
2014/03/25 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
学校重阳节活动总结
2015/03/24 职场文书
蜗居观后感
2015/06/11 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript