Axure如何制作动态验证码效果

时间:2026-02-14 05:55:31

在我们注册一个账号或登录的时候,经常会用到图片验证码验证,这些都是动态验证码,可以点击切换。这种动态验证码的方式,在Axure中也能快速实现。那么,在Axure中,如何制作动态验证码效果呢?本文就由小编带大家了解一下,一起来看看吧~

Axure如何制作动态验证码效果

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑:Windows 7

方法/步骤

1.打开Axure,我们准备一个登录框,然后从左侧元件库拖取一个【动态面板】元件,1个【文本框】元件到页面。排版放置如图

Axure如何制作动态验证码效果

2.双击动态面板,在弹出框中新增几个【面板状态】,你可以选择多增加几个,这样你就有更多的验证码选择。如图

Axure如何制作动态验证码效果

3.双击动态面板【State1】,在虚线框中放入一张验证码图片。如图

Axure如何制作动态验证码效果

4.以同样的方式,将【其它几个动态面板状态】都放入验证码图片。如图

Axure如何制作动态验证码效果

5.回到【主页面】,选择动态面板,找到交互动作【鼠标单击时】,如图

Axure如何制作动态验证码效果

6.设置【鼠标单击时】的动作为:设置面板状态到向后循环;如图

Axure如何制作动态验证码效果

7.完成设置,预览结果,动态验证码效果完成。如图

Axure如何制作动态验证码效果

总结:

1.打开Axure,从左侧元件库拖取一个【动态面板】元件,排版放置;

2.双击动态面板,在弹出框中新增几个【面板状态】;

3.双击动态面板【State1】,在虚线框中放入一张验证码图片;

4.以同样的方式,将【其它几个动态面板状态】都放入验证码图片;

5.回到【主页面】,选择动态面板,找到交互动作【鼠标单击时】;

6.设置【鼠标单击时】的动作为:设置面板状态到向后循环;

7.完成设置,预览结果,动态验证码效果完成。

注意事项

Tips:在登录时还可以设置判断验证码输入框与动态验证码状态是否匹配,来判断验证码是否正确。

© 2026 五度知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com