翻亮图片 幸运抽奖

马震安

1. 显示图片轻松设置

打开Axure RP Pro 7.0软件，在站点地图面板将不需要的页面右击删除掉，将所保留的页面重命名（如“幸运大抽奖”）。在部件库拖动中继器到页面中，双击这个中继器，在中继器页面利用部件属性和样式面板对原有的矩形进行样式设置；在中继器数据集面板增加3列，字段名分别为ImgA（用于存放背景图）、ImgB（用于存放不同的奖品图）、sjs（用于图片的随机显示），添加行并分别在ImgA和ImgB列右击导入背景图和奖品图。在Repeater Style面板设置布局为水平，勾选换行，每个row包含3个（图2）。

接下来，右击矩形转换成动态面板并命名为“图片显示”，在部件管理面板双击动态面板中的“状态1”，在状态1窗口，拖动图片部件到矩形中，调整其大小与矩形内径相同，导入临时背景图。右击状态1复制成状态2和状态3，调整状态2和状态3窗口中的矩形和图片宽度，越来越小（图3）。

依次复制状态3、状态2、状态1，把状态1-6从上到下排列好，重新命名为1-6，这样就能实现图片的翻转效果。为了在选中图片时，图片边框变红，需要把状态6中的图片命名为tu，点击部件属性和样式面板中属性标签交互样式中的“选中”属性，设置好选中时的边框颜色为红色，线形加宽。

接着，切换到中继器窗口，在中继器项目交互面板双击Case 1，在用例编辑器窗口右击删除原有语句，添加6个“设置图像”动作，在配置动作处勾选图片显示下的“设置（图片）”，默认设置为“值”，点击fx按钮，在编辑值窗口点击“插入变量、属性、函数或运算符”，在弹出的下拉列表中前3个选择Item.ImgA，后3个选择Item.ImgB（图4）。

2. 动画效果按需控制

利用“项目→全局变量”菜单添加名称为bian、默认值为1的变量。然后，为中继器窗口中动态面板的“鼠标单击时”新增用例，在用例编辑器窗口新增变量bian等于1时的条件，添加设置面板状态动作，在配置动作处勾选当前部件，选择状态设置为6；增加选中动作，勾选tu；添加禁用动作，勾选图片显示；添加设置变量动作，勾选bian，值为空。分别为“鼠标移入时”和“鼠标移出时”添加用例，在各自的用例编辑器窗口都新增一条变量bian等于空时的条件，都添加设置面板状态动作，勾选当前部件，鼠标移入时选择状态为Next，鼠标移出时选择状态为Previous，循环间隔都为50毫秒（图5）。

3. 巧设奖品随机排列

首先，在中继器窗口的图片上添加单选按钮部件，命名为xz，右击它设置为隐藏，并为它的“选中状态改变时”添加用例。在窗口中新增条件为这个部件的选中状态为true时添加更新行动作，选择sjs列，值为Math.random（）；添加新增排序动作，勾选中继器，属性为sjs，顺序为升序（图6）。

4. 不用代码控制抽奖

在幸运大抽奖主页中增加一个矩形部件，大小与图片区域相等，透明度为30%，置于顶层，名称为fg。在主页合适位置添加形状按钮，双击标签修改为开始。右击它转换成动态面板，名称为anniu。右击anniu的状态1复制成状态2，将状态2里面的按钮标签改为“再来一次”。为状态1中“开始”按钮的“单击鼠标时”增加用例，添加选中动作，勾选xz，值为true；添加隐藏动作，勾选fg；添加设置面板状态动作，勾选anniu，选择状态为状态2；再增加选中动作，勾选xz，值为false。同样为状态2中“再来一次”按钮的“单击鼠标时”增加用例。添加选中动作，勾选xz，值为true；增加设置面板状态动作，勾选图片显示，选择状态设置为1；增加设置变量值动作，勾选bian，值为1；增加显示动作，勾选fg；增加设置面板状态动作，勾选anniu，选择状态为“状态1”；再增加选中动作，勾选xz，值为false（图7）。

切换到“幸运大抽奖”主页面，在“页面交互”面板为“页面载入时”增加用例，添加设置面板状态动作，勾选“图片显示（动态面板）”，选择状态设置为1。

以上任务完成后，发布生成HTML文件。点击该文件启动网络浏览器，便能够演示抽奖了。

1. 显示图片轻松设置

打开Axure RP Pro 7.0软件，在站点地图面板将不需要的页面右击删除掉，将所保留的页面重命名（如“幸运大抽奖”）。在部件库拖动中继器到页面中，双击这个中继器，在中继器页面利用部件属性和样式面板对原有的矩形进行样式设置；在中继器数据集面板增加3列，字段名分别为ImgA（用于存放背景图）、ImgB（用于存放不同的奖品图）、sjs（用于图片的随机显示），添加行并分别在ImgA和ImgB列右击导入背景图和奖品图。在Repeater Style面板设置布局为水平，勾选换行，每个row包含3个（图2）。

接下来，右击矩形转换成动态面板并命名为“图片显示”，在部件管理面板双击动态面板中的“状态1”，在状态1窗口，拖动图片部件到矩形中，调整其大小与矩形内径相同，导入临时背景图。右击状态1复制成状态2和状态3，调整状态2和状态3窗口中的矩形和图片宽度，越来越小（图3）。

依次复制状态3、状态2、状态1，把状态1-6从上到下排列好，重新命名为1-6，这样就能实现图片的翻转效果。为了在选中图片时，图片边框变红，需要把状态6中的图片命名为tu，点击部件属性和样式面板中属性标签交互样式中的“选中”属性，设置好选中时的边框颜色为红色，线形加宽。

接着，切换到中继器窗口，在中继器项目交互面板双击Case 1，在用例编辑器窗口右击删除原有语句，添加6个“设置图像”动作，在配置动作处勾选图片显示下的“设置（图片）”，默认设置为“值”，点击fx按钮，在编辑值窗口点击“插入变量、属性、函数或运算符”，在弹出的下拉列表中前3个选择Item.ImgA，后3个选择Item.ImgB（图4）。

2. 动画效果按需控制

利用“项目→全局变量”菜单添加名称为bian、默认值为1的变量。然后，为中继器窗口中动态面板的“鼠标单击时”新增用例，在用例编辑器窗口新增变量bian等于1时的条件，添加设置面板状态动作，在配置动作处勾选当前部件，选择状态设置为6；增加选中动作，勾选tu；添加禁用动作，勾选图片显示；添加设置变量动作，勾选bian，值为空。分别为“鼠标移入时”和“鼠标移出时”添加用例，在各自的用例编辑器窗口都新增一条变量bian等于空时的条件，都添加设置面板状态动作，勾选当前部件，鼠标移入时选择状态为Next，鼠标移出时选择状态为Previous，循环间隔都为50毫秒（图5）。

3. 巧设奖品随机排列

首先，在中继器窗口的图片上添加单选按钮部件，命名为xz，右击它设置为隐藏，并为它的“选中状态改变时”添加用例。在窗口中新增条件为这个部件的选中状态为true时添加更新行动作，选择sjs列，值为Math.random（）；添加新增排序动作，勾选中继器，属性为sjs，顺序为升序（图6）。

4. 不用代码控制抽奖

在幸运大抽奖主页中增加一个矩形部件，大小与图片区域相等，透明度为30%，置于顶层，名称为fg。在主页合适位置添加形状按钮，双击标签修改为开始。右击它转换成动态面板，名称为anniu。右击anniu的状态1复制成状态2，将状态2里面的按钮标签改为“再来一次”。为状态1中“开始”按钮的“单击鼠标时”增加用例，添加选中动作，勾选xz，值为true；添加隐藏动作，勾选fg；添加设置面板状态动作，勾选anniu，选择状态为状态2；再增加选中动作，勾选xz，值为false。同样为状态2中“再来一次”按钮的“单击鼠标时”增加用例。添加选中动作，勾选xz，值为true；增加设置面板状态动作，勾选图片显示，选择状态设置为1；增加设置变量值动作，勾选bian，值为1；增加显示动作，勾选fg；增加设置面板状态动作，勾选anniu，选择状态为“状态1”；再增加选中动作，勾选xz，值为false（图7）。

切换到“幸运大抽奖”主页面，在“页面交互”面板为“页面载入时”增加用例，添加设置面板状态动作，勾选“图片显示（动态面板）”，选择状态设置为1。

以上任务完成后，发布生成HTML文件。点击该文件启动网络浏览器，便能够演示抽奖了。

1. 显示图片轻松设置

打开Axure RP Pro 7.0软件，在站点地图面板将不需要的页面右击删除掉，将所保留的页面重命名（如“幸运大抽奖”）。在部件库拖动中继器到页面中，双击这个中继器，在中继器页面利用部件属性和样式面板对原有的矩形进行样式设置；在中继器数据集面板增加3列，字段名分别为ImgA（用于存放背景图）、ImgB（用于存放不同的奖品图）、sjs（用于图片的随机显示），添加行并分别在ImgA和ImgB列右击导入背景图和奖品图。在Repeater Style面板设置布局为水平，勾选换行，每个row包含3个（图2）。

接下来，右击矩形转换成动态面板并命名为“图片显示”，在部件管理面板双击动态面板中的“状态1”，在状态1窗口，拖动图片部件到矩形中，调整其大小与矩形内径相同，导入临时背景图。右击状态1复制成状态2和状态3，调整状态2和状态3窗口中的矩形和图片宽度，越来越小（图3）。

依次复制状态3、状态2、状态1，把状态1-6从上到下排列好，重新命名为1-6，这样就能实现图片的翻转效果。为了在选中图片时，图片边框变红，需要把状态6中的图片命名为tu，点击部件属性和样式面板中属性标签交互样式中的“选中”属性，设置好选中时的边框颜色为红色，线形加宽。

接着，切换到中继器窗口，在中继器项目交互面板双击Case 1，在用例编辑器窗口右击删除原有语句，添加6个“设置图像”动作，在配置动作处勾选图片显示下的“设置（图片）”，默认设置为“值”，点击fx按钮，在编辑值窗口点击“插入变量、属性、函数或运算符”，在弹出的下拉列表中前3个选择Item.ImgA，后3个选择Item.ImgB（图4）。

2. 动画效果按需控制

利用“项目→全局变量”菜单添加名称为bian、默认值为1的变量。然后，为中继器窗口中动态面板的“鼠标单击时”新增用例，在用例编辑器窗口新增变量bian等于1时的条件，添加设置面板状态动作，在配置动作处勾选当前部件，选择状态设置为6；增加选中动作，勾选tu；添加禁用动作，勾选图片显示；添加设置变量动作，勾选bian，值为空。分别为“鼠标移入时”和“鼠标移出时”添加用例，在各自的用例编辑器窗口都新增一条变量bian等于空时的条件，都添加设置面板状态动作，勾选当前部件，鼠标移入时选择状态为Next，鼠标移出时选择状态为Previous，循环间隔都为50毫秒（图5）。

3. 巧设奖品随机排列

首先，在中继器窗口的图片上添加单选按钮部件，命名为xz，右击它设置为隐藏，并为它的“选中状态改变时”添加用例。在窗口中新增条件为这个部件的选中状态为true时添加更新行动作，选择sjs列，值为Math.random（）；添加新增排序动作，勾选中继器，属性为sjs，顺序为升序（图6）。

4. 不用代码控制抽奖

在幸运大抽奖主页中增加一个矩形部件，大小与图片区域相等，透明度为30%，置于顶层，名称为fg。在主页合适位置添加形状按钮，双击标签修改为开始。右击它转换成动态面板，名称为anniu。右击anniu的状态1复制成状态2，将状态2里面的按钮标签改为“再来一次”。为状态1中“开始”按钮的“单击鼠标时”增加用例，添加选中动作，勾选xz，值为true；添加隐藏动作，勾选fg；添加设置面板状态动作，勾选anniu，选择状态为状态2；再增加选中动作，勾选xz，值为false。同样为状态2中“再来一次”按钮的“单击鼠标时”增加用例。添加选中动作，勾选xz，值为true；增加设置面板状态动作，勾选图片显示，选择状态设置为1；增加设置变量值动作，勾选bian，值为1；增加显示动作，勾选fg；增加设置面板状态动作，勾选anniu，选择状态为“状态1”；再增加选中动作，勾选xz，值为false（图7）。

切换到“幸运大抽奖”主页面，在“页面交互”面板为“页面载入时”增加用例，添加设置面板状态动作，勾选“图片显示（动态面板）”，选择状态设置为1。

以上任务完成后，发布生成HTML文件。点击该文件启动网络浏览器，便能够演示抽奖了。