Axure 制作滑动验证码

一、效果展示

  image.png

image.png

点击预览原型效果


二、元件准备

1、拖入所需元件

在工作区中拖入1个带边框(拖动范围框)的矩形框、2个无边框(拖动动态颜色框、验证成功提示框)的矩形框和一个动态面板(拖动按钮);

2、元件命名

分别为其命名,拖动范围框(MoveBox)、拖动动态颜色框(MoveBoxActive)、验证成功提示框(MessageShow)、拖动按钮(CustomPanel);

3、设置尺寸和显示样式

MoveBox(300px*36px)、MoveBoxActive(36px*36px)、MessageShow(300px*60px)、CustomPanel(36px*36px);

设置CustomPanel的显示样式;

设置MoveBox、MoveBoxActive、CustomPanel 对齐方式为左对齐且上下居中,MessageShow放置到MoveBox之下;

三、添加动态面板CustomPanel拖动用例

1、CustomPanel用例总览

image.png

2、拖动时条件及相关设置

image.png


image.png


image.png


3、拖动结束时条件及相关设置

image.png


image.png


image.png


image.png


image.png


image.png






分享到: 更多 ()

评论

    暂无评论,快来抢沙发吧!