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目前无法实现,这里就省略了。如果以后有这个功能,我会添加到相关实例中的。

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

待续。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

19180
来自专栏河湾欢儿的专栏

选中分享

9910
来自专栏刘望舒

React Native组件(三)Text组件解析

前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

26260
来自专栏姬小光

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

15430
来自专栏mySoul

文档和元素的几何滚动

当浏览器在窗口中渲染文档时,它将会创建文档一个视觉表现层,在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。

17800
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

19110
来自专栏微信小程序开发

小程序中图片高度等比缩放

前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩...

606100
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

58850
来自专栏自动化测试实战

HTML第一课——基础知识普及【2】

22560
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

24760

扫码关注云+社区

领取腾讯云代金券