《UI界面无代码编程小示例:悬停放大》| uiotos、零代码、0代码、无代码、低代码、可视化编程、nodered、amis、appsmith、codewave

107 阅读7分钟

在做实际项目时,经常有遇到这种情况:当鼠标悬停图片时,图片变大,移出时,图标变小,如下所示:

效果

「运行」

1.gif

「编辑」

image.png

过程

「步骤1」拖入图片按钮并设置

3.gif

勾选“移入事件启用”,所用到的属性做标记。

「步骤2」拖入两个透明传递并设置

4.gif

分别设置两个透明传递的输入(组)为数字1.2和1。

「步骤3」连线使移入时图片变大

5.gif

图片按钮的移入事件触发函数执行,函数的输出分别传给图片按钮的横缩放、纵缩放。

「步骤4」连线使移出时图片变小

6.gif

图片按钮的移出事件触发函数执行,函数的输出分别传给图片按钮的横缩放、纵缩放。

关于

UIOTOS是一款“神奇”的前端工具,支持无代码搭建后台管理、上位机HMI、大屏组态等各类IoT应用。

UIOTOS 集成 物联中台 = IoT平台上层应用(SCADA、CRUD)

UIOTOS 集成 NodeRed = 工控设备上位机(GUI / HMI)

UIOTOS 集成 APIJSON = 中后台业务管理(CRUD)

image.png

往期文章: