翻亮圖片 幸運抽獎

馬震安

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文件。點擊該文件啟動網絡瀏覽器，便能夠演示抽獎了。