前端小编介绍过一篇,如何制作手机开关按钮的效果,借此按钮,我们来制作一个通过开关按钮来控制登录密码文字的显示与隐藏效果,这里面要使用到脚本,快跟小编一起学习一下吧,小编实现这个效果的时候都觉得好神奇。
工具/原料
1
电脑
2
Axure
方法/步骤
1
首先准备好本次要使用到的元件元素,开关按钮小编就不详细介绍如何制作了,可以翻看前面的经验,如下图所示。
2
选择开关按钮,设置鼠标单击时的交互事件,按钮前面的经验我们先把这个开关的效果实现,如下图所示。
3
然后选择文本输入框,给文本输入框载入时的交互事件进行设置,这里需要用到Javascript脚本了,如下图所示。
4
然后在返回到开关按钮的单击交互事件中,在原有的交互事件中加入如下图所示的设置。
5
同时,在对别外一个事件的交互事件中加入如下图所示的设置。
6
f5预览一下效果,默认文本框输入的密码是隐藏状态的,如下图所示。
7
点击滑动按钮,隐藏的密码就会显示出文字来了,如下图所示。
注意事项
1
对于脚本的使用方法小编也在学习中,不足之处还望指导
2
喜欢的话可以关注小编,我们一起学习
上一篇:如何使用摹客的十大特色功能?
下一篇:iClap是什么?