Tab選項卡實現(xiàn)
如何實現(xiàn)如下圖所示點擊a,b,c三個按鈕實現(xiàn)上方圖片的切換
(1)首先我們先放置三個矩形框建立整體布局
(2)在大的矩形框上面放置動態(tài)面板,這是實現(xiàn)圖片切換的重要條件(實現(xiàn)banner輪播同樣需要這一步驟),本次例子是實現(xiàn)三張圖的切換访得,所以再增加兩個狀態(tài)炎咖,點擊右下角動態(tài)面板點擊加號添加狀態(tài)衷佃,如下圖所示操作
(3)添加完三個狀態(tài)后希坚,為每個狀態(tài)添加一張圖片殴穴,例如雙擊state1進入面板狀態(tài)state1柴钻,然后添加自己需要的圖片,如下圖操作靠粪,state2占键,state3操作同上
(3)接下來我們再來設(shè)置a,b,c三個切換鍵,為了使頁面加載完a切換鍵就是黃色并且點擊任意切換鍵該切換鍵會顯示黃色牲距,我們來進行如下操作:設(shè)置a鍵咖摹,將屬性框下的選中勾中(為了實現(xiàn)頁面加載完a鍵就顯示為黃色)楞艾,然后點擊鼠標按下設(shè)置事件硫眯,設(shè)置填充顏色择同,點擊確定裹纳,設(shè)置完成剃氧。b,c鍵除了不勾選中外朋鞍,剩下的和a鍵操作相同滥酥。
(4)接下來實現(xiàn)點擊三個按鍵后圖片進行切換功能,還是先設(shè)置a鍵瘦真,在右邊屬性欄交互事件里雙擊鼠標單擊時進入事件編輯,如下圖吗氏,點擊設(shè)置選中,將abc三個矩形選中膀哲,a為true,其他兩個為false(設(shè)置b鍵b為true仿村,設(shè)置c時c為true其余為false)蔼囊,設(shè)置完后再設(shè)置面板狀態(tài)畏鼓,具體操作如下圖壶谒,在a鍵設(shè)置下汗菜,選擇狀態(tài)為state1陨界,進入動畫退出動畫按自己的喜好選擇菌瘪,bc鍵設(shè)置下選擇狀態(tài)分別為state2麻车,state3
(5)通過以下設(shè)置缀皱,這個交互事件設(shè)置也就完成了动猬,按下F5可以進入網(wǎng)頁查看設(shè)置后的效果啤斗。
? ? ? ?? 感謝查看,如有錯誤和意見請大家多多指點赁咙!