预览地址: https://lovexwu.github.io/halaMusic/
项目功能
一、头部的音乐播放器 Fm 模块
1、事件监听:发送对象,绑定播放、暂停、下一首
2、点击播放:更新状态
3、点击暂停:清除
4、获取歌曲数据:设置歌名、作者和背景图片
5、设置音乐:得到新的音乐
6、更新时间、进度条
二、底部展现不同的channel音乐合集Footer 模块
1、 绑定事件
左右按钮事件 + li 图片 点击事件
2、 渲染数据
渲染底部数据 + 重设样式
注: 其中Fm模块和Footer模块,通过事件中心来交互,而且它们是独立的
项目技术
1、响应式布局+自适应: vh + @media (媒体查询)实现
2、事件监听:自定义事件
3、音乐播放:audio对象实例化
4、字体图标:iconfont
5、animate.css + 编写一个组件
6、ajax 获取数据
遇到的坑
1、GitHub不支持http协议
2、百度会限制我们的访问,所以在<head>标签下一定要添加<meta name = "referrer" content = "never">
3、收藏歌曲部分还没完善
技术栈
jQuery、css3、响应式
网友评论