Mockplus实例之一看就会de五个交互功能

实例来源：豆瓣新加日记（https://www.douban.com/note/create）

先看看豆瓣新加日记的网页：

再看看已经制作好的原型预览页面：

在原型制作中有五个有特色的交互功能：

1 题目和正文切换时，边框颜色变深

这里需要交互，就拿“正文”部分说吧，准备一个形状组件和输入框组件，放好位置，输入框组件边框设置为白色，输入框三个字去掉，然后合并为组；然后再把这个组复制，设置为不可见，组1和组2需要设置交互，点击组1时，组1设置为隐藏，组2设置为显示；点击组2时，组2隐藏，组1显示。

2 使用弹出面板

上传图片和添加链接都需要使用弹出面板，弹出面板里面的内容跟上面的制作方法类似，就不再重复了，重点说一下怎样关闭弹出面板。

交互链接都设置好后，右上角的“X”和确定、取消三个按钮都设置为把弹出面板关闭掉，具体的请看下图：

交互的时候必须要和弹出面板交互，而不是和弹出来的弹窗交互。设置为“切换”，这里不能选择“关闭”，如果选择“关闭”后，演示的时候只能点击一次。

3 单选按钮组的切换

需要这样设计：

下面一排单选按钮全部设为不可见。

为了更明白交互过程，我把上面的组件分别叫：A和A1；B和B1；C和C1

交互过程是这样的：

点击A，A隐藏，A1显示，B和C显示，B1和C1隐藏；

点击B，B隐藏，B1显示，A和C显示，A1和C1隐藏；

点击C，C隐藏，C1显示，A和B显示，A1和B1隐藏；

所有交互完成后，这两排组件重合在一起，上面的一排在最上面一层。

4 鼠标经过，字体和背景变色

这个功能在以前的实例送有提到过：

改变背景颜色：

改变字体颜色：

这两步做好以后，就用“《豆瓣原创声明》”和弹出面板交互：

5 弹出面板悬浮，网页滚动

很多人都说Mockplus不能做悬浮，其实错了，可以做。针对这个实例，就特简单。

做好的原型预览后，弹出面板会跟着网页一起滚动，这里教大家一个方法：当前页面全部放入到一个很大的内容面板里面去，内容面板链接这个演示页面，这样，预览时弹出面板就不会和网页一起滚动了（可以看看上面的原型视频）。

原网页还有一个交互功能，只是Mockplus目前无法实现，这里就省略了。如果以后有这个功能，我会添加到相关实例中的。

文中有哪些不妥的地方，希望指正，谢谢。

待续。。。