下面我們來一起學習一下iH5初級教程的第二節:排版必備,掌握H5的面板工具
工具/原料
iH5
方法/步驟
在物件樹選中舞臺,點選工具欄的圖片工具,上傳背景圖片,和三個方向的箭頭。
在物件樹選中舞臺,點選工具欄的面板工具,在舞臺畫出一個框
選中面板,點選工具欄的圖片工具,下新增長度超過面板的選單欄圖片
面板屬性面板剪下選擇NO,會看到圖片超出面板的部分,剪下選擇YES,則看不到圖片超出面板的部分,預覽時,會顯示剪下的效果,左右拖拉圖片,可以移動選單圖片。
1、新增五個頁面,每個頁面新增一個面板,面板下新增一張長圖片,面板剪下屬性NO,會顯示面板區域外的圖片。
2、剪下屬性YES,面板區域外的圖片部分不顯示,預覽時,會顯示剪下的效果,上下拖拉圖片,可以移動圖片。
選中選單圖片,點選工具欄透明按鈕工具,在相應目錄位置畫一個框,
選中透明按鈕,點選工具欄的事件工具,新增事件,點選透明按鈕,跳轉至相應頁面。
先行知識:事件
重點控制元件:面板、頁面、透明按鈕、事件
案例:滑動選單的做法
知識點:
1、 面板與圖片的尺寸:以此案例的目錄為例,圖片的長度大於面板長度,所以可以左右移動,如果圖片高度大於面板高度,則預覽案例時,移動圖片,圖片不能固定地橫向移動。所以圖片高度應小於面板高度。
2、 剪下屬性:面板的屬性面板有剪下這個屬性,選擇YES,編輯時面板外的圖片部分不可見,預覽時是剪下YES的效果,選擇NO,編輯時可以看到面板外的圖片部分,方便編輯。
相關事件:
跳轉頁面:
觸發物件:透明按鈕,
觸發條件:點選,
目標物件:舞臺,
目標動作:跳轉頁面。
選擇一個頁面