实例来源：豆瓣新加日记（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目前无法实现，这里就省略了。如果以后有这个功能，我会添加到相关实例中的。
文中有哪些不妥的地方，希望指正，谢谢。
待续。。。
原创文章，作者：yanz kontol，如若转载，请注明出处：https://www.iamue.com/16617/
