用豆瓣FM做的模板,实现顶部固定,注册/登录等交互功能,主要交互都在顶部,具体说明如下:
1、顶部固定:
鼠标向下滚动之后,页面顶部会切换成简版,并固定在页面顶部。
PS:点击右边绿色的箭头也可以收缩/展开顶部。
2、下载豆瓣APP:
鼠标放在左上角的文字“下载豆瓣FM APP”,会出现下载二维码,移除则消失。
3、意见反馈:
(1)鼠标点击左上角的文字“我要反馈”,会出现反馈问题的弹层;
(2)鼠标光标放在输入框,默认的提示文字会消失,光标移出文字恢复;
(3)点击右上角的“×”,或者“取消”“确定”按钮,都可以关闭弹层。
4、注册:
(1)顶部三个入口,完整顶部有两个,简版有一个,详见附图;
(2)点击“同意协议”进入下一步;
(3)注册页面,鼠标光标放在输入框,默认的提示文字会消失,光标移出文字恢复;
(4)点击小键盘图标会弹出软键盘,点击软键盘可以关闭;
(5)点击右上角的“×”,或者“注册豆瓣账号”按钮,可以关闭弹层;
(6)点击“登录豆瓣”,切换到登录界面。
5、登录:
(1)输入框效果同注册,小键盘同样可以点击;
(2)点击右上角的“×”,或者“登录豆瓣”按钮,可以关闭弹层;
(3)点击“注册豆瓣账号”,切换到注册界面。
6、图标:
(1)收藏、删除、暂停、下一首的图标都是画出来的形状,可以更换成任意颜色;
(2)图标都做了hover效果,鼠标放上去会变色,颜色变化较小;
(2)点击收藏,颜色会变红,再次点击取消。