1、如图所示,以四个图为例。首先大家准备四稍僚敉视个宽一样的图片(当然不一样也可以,就是移动的尺寸需要根据需要计算);为了确定位置及效果,我在123图的下面加了一个底,宽为600,在两侧预留20px的位置,各放置两个15*15的图标,做激发操作的按钮。以四个图为例,实例中的每个图宽180px,为四个图命名1234,并将图123之间的间距调整为10,123为显示,4为隐藏(属性),图4放置在底图最右边的边缘位置;注:为了很明确的位置,大家可如图中一样,通过工作窗口的边缘拖出辅助线做帮助。
2、实现在显示区域展示图234,隐藏图1效果(右侧按钮图标用例)选中右侧按钮,“鼠标点击时”-添加用例;在弹出窗口点击“元件”下的“移动”,在最右侧“配置动作”进行1234的配置,具体内容如下:图1的处理:选中1,下方“移动”选“经过”X设置值为-200(值的算法:图1距离底图的左侧边缘为20,+图片本身的宽度,由于是往左移动,所以是负数);为了防止图片一致移动,为每个图片设置边界值,图1设置边界值,左侧>120;保证点击切换按钮的时候,图标不冲出底图的显示区域图2:的处理:选中2,下方“移动”选“经过”X设置值为-190(间距10+180,也就是说图2移动到图1的位置);左侧>120;图3的处理:选中3,下方“移动”选“经过”X设置值为-190(间距10+180,也就是说图3移动到图2的位置);左侧>310;图4的处理:选中4,下方“移动”选“经过”X设置值为-200(图片本身的宽度+图标占据的位置,也就是说图4移动到图3显示);左侧>500;隐藏显示的设置:同用例(case1)下,元件-显示/隐藏,图1设置为隐藏,图4设置为显示;确定。
3、左侧按钮图标加用例将步骤2中的移动中的“-”去掉,图1设置为显示,图4设置为隐藏。其他不用动。提交即可。边界值按照1234,依次为:120,310,500,700
4、多个图片的设置方法类似,依次类推。