引言
为课程作业,设计参考了无印良品日本官网
应老师要求不使用JQ,全部效果源码一行行敲出来,浏览器用的是360极速浏览器,未对其他浏览器内核进行适配,最终实现的效果如下,可进入展示页面查看
展示页面:http://xyy9.gitee.io/roll/
页面介绍
1. 开头
为视频做背景,上悬浮div “人生中的一些小事”
2. 导航栏
用css做了一些过度动画,旋转放大等等
3. 音乐播放器
音乐播放器插件实现:https://blog.csdn.net/Yuyao_Xu/article/details/104161086
位于右上角固定显示
鼠标移入可展开歌单和歌曲封面信息
默认选中第一首,点击碟片进行播放,底下图片切换至对应图片,播放时,碟片进行旋转,唱针不动,点击歌曲名字进行重播。
4. 第一板块:映像
记录摄影图片,标注时间,在主页展示了三幅照片
点击进入对应的详细页面,底下配翻页按钮和返回主页
5.时钟
时钟插件实现:https://blog.csdn.net/Yuyao_Xu/article/details/104161196
位于映像标题右侧显示,实时获取当前时间,各指针随时间转动
6. 第二板块:随笔
摘录一些诗歌,以及文章,展示在主页的为诗歌,点击更多文章显示文章
7. 第三板块:流年
照片轮播图,点击进入相册
轮播图插件编写:https://blog.csdn.net/Yuyao_Xu/article/details/104161230
相册实现:https://blog.csdn.net/Yuyao_Xu/article/details/104161236