妙味全日制班作品展示:移动端H5手机操作系统

在上次妙味课堂 “0829届全日制班” 的创意作品展示秀中,有一组学员演示了他们组开发的一款移动端操作系统,全部运用原生的 H5+CSS3+JS 方式实现,虽然作品比较简陋,但大体框架已经搭建起来了,以后继续再完善下去,应该是一款非常吸引眼球的好作品!

目前这个班仅仅只学到妙味实体班课程的一半儿,因此他们分享的作品并不完整,还有很多细节需要调整,所以无法将作品上线。不过为了让大家有一个直观的感受,我们干脆把演示过程做成了 GIF 动效图片,供大家先睹为快!

这是当天的活动现场:

同学们都兴致勃勃的聆听现场讲解:

正在现场演示作品的同学:

从手机滑屏切换开始进入系统,遮罩文字使用了CSS3滤镜,拖拽则是他们用原生JS在移动端写的一个组件:

屏幕切换使用了 “拖拽+3D” 的方式实现:

音乐播放器的入场方式做了两个3D动画,一个是立体旋转方块,一个是3D圆环滑动展示,熟悉妙味课程的同学应该不会陌生:

点击唱片进入后,是一个移动端的真实音乐播放器,实现了进度条拖拽、唱片旋转、暂停/播放、上一首下一首等必备功能:

切换音乐列表则做了一个隐藏的小菜单,在右下角的图标处点击后,就唤出了音乐列表,供用户选择:

移动端相册也实现了最基本的功能:上下滑动照片、点击放大当前照片、左右切换照片:

当然,删除照片的功能怎能缺少?这里做了一个删除多张照片的功能,可以一次性删除多张:选中即将要删除的照片时,照片会以碎片屑式卷起,然后 “嗖” 的一下多张照片被删除掉,其余的照片再补全空缺的照片位置~

图标位置的管理自然也少不了,相互换一下位置吧,都摆得齐整妥当些~

还有通讯录功能,对每一条用户进行编辑等功能,也是不能缺少的哦:

这个项目是个综合项目,是由一个项目开发小组以功能为单位、各自分工,最后再把功能组合而成。这一组的成员分别是:殷东阁、韩梦桐、毕景名、韩俊、宋丽炜、韩旭、高亚宁、董文璐。当他们现场演示完成以后,获得了大家热烈的掌声。在本次分享活动过后,他们仍将继续学习后面的 JS 课程,等整个课程结束后,他们会把这件作品继续完善、并增加一些更为实用的功能,最终将作品完整的呈现在大家面前。

课程咨询QQ:3349734318、3315116152
课程咨询电话:010-57269690
客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00
地址:北京海淀区西二旗辉煌国际大厦(西6号楼)319室

妙味网友
请登录后留言,请登录注册