Mockplus实例之一看就会de五个交互功能
实例来源：豆瓣新加日记（https://www.douban.com/note/create）先看看豆瓣新加日记的网页：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/2377bd88-c00f-49ab-8362-50b49443b5ab.gif
再看看已经制作好的原型预览页面：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/eea64546-f1a8-4b62-9d69-67b40a42891f.gif
在原型制作中有五个有特色的交互功能：
1 题目和正文切换时，边框颜色变深
这里需要交互，就拿“正文”部分说吧，准备一个形状组件和输入框组件，放好位置，输入框组件边框设置为白色，输入框三个字去掉，然后合并为组；然后再把这个组复制，设置为不可见，组1和组2需要设置交互，点击组1时，组1设置为隐藏，组2设置为显示；点击组2时，组2隐藏，组1显示。
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/4a733fc4-65ef-4deb-8c1a-02f6fd49bcc2.png
2 使用弹出面板
上传图片和添加链接都需要使用弹出面板，弹出面板里面的内容跟上面的制作方法类似，就不再重复了，重点说一下怎样关闭弹出面板。
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/720601d0-6ed2-4183-ab32-395137b5019b.png
交互链接都设置好后，右上角的“X”和确定、取消三个按钮都设置为把弹出面板关闭掉，具体的请看下图：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/653f65f5-a9f0-456c-a4e5-91d6f0d4e123.png
交互的时候必须要和弹出面板交互，而不是和弹出来的弹窗交互。设置为“切换”，这里不能选择“关闭”，如果选择“关闭”后，演示的时候只能点击一次。
3 单选按钮组的切换
需要这样设计：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/e535f893-4b5c-4602-8b4d-76756630c4a7.png
下面一排单选按钮全部设为不可见。
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/43d370e9-b4aa-4b6f-99e3-04c6c4bec239.png
为了更明白交互过程，我把上面的组件分别叫：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 鼠标经过，字体和背景变色
这个功能在以前的实例送有提到过：
改变背景颜色：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/afdc1bee-8cce-4abd-a535-36ab1a47aeb1.png
改变字体颜色：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/0351f6fe-c734-4e4b-b7aa-b8c1e1965a15.png
这两步做好以后，就用“《豆瓣原创声明》”和弹出面板交互：
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/18f45c34-c1f9-42bc-ba4f-35f0670419eb.png
5 弹出面板悬浮，网页滚动
很多人都说Mockplus不能做悬浮，其实错了，可以做。针对这个实例，就特简单。
做好的原型预览后，弹出面板会跟着网页一起滚动，这里教大家一个方法：当前页面全部放入到一个很大的内容面板里面去，内容面板链接这个演示页面，这样，预览时弹出面板就不会和网页一起滚动了（可以看看上面的原型视频）。
https://cdns-mockplus-cn.alikunlun.com/image/2016/07/98cba4b4-89e7-44f5-9a39-e2e479eed539.png
原网页还有一个交互功能，只是Mockplus目前无法实现，这里就省略了。如果以后有这个功能，我会添加到相关实例中的。
文中有哪些不妥的地方，希望指正，谢谢。
待续。。。
页:
[1]