引言

为课程作业，设计参考了无印良品日本官网
应老师要求不使用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

网站项目源码下载：

https://gitee.com/xyy9/roll