是通過jqury的animate方法來寫的一個互動效果,當然他 覺得動畫有一些卡,是以他用延時處理的方法,避免動畫卡,方法可以值得借鑒。我自己用hover方法,然後動畫時間設定的更短,為100毫秒,動畫運作起來,速度還行。
正好自己最近需要完成一個系統的導覽列的滑動效果,具體是說,hover上導覽列的一個選項,此時有一個背景(可以是純色的背景或一張漸變的圖檔),執行個體我示範用的是純色的背景,省的去弄圖檔背景。demo截圖如下圖所示:
代碼如下,在代碼進行注釋說明:
工作原理大緻:在a标簽中設定2個div,一個是導覽列的标題,另外一個就是要向上滑動的
層。為了一開始不出現滑動的層,是以對a标簽的position設定為relative,并且overflow設定為hidden,不能對li進行
hidden,因為一般情況下,導覽列下有下拉菜單。對2個div的position設定為absolute。然後在hover的方法裡面,對
hover_bg這個層的top值進行動畫變化,達到背景色塊向上運動的一個互動效果。在動畫時間設定上,我寫的是“fast”,在3個浏覽器上測試,動
畫還算流暢,是以暫且沒有考慮用延時去處理動畫卡頓的問題。
ps:
1.估計是年底了,網頁很多被營運商劫持了,當然也有可能是我的電腦中毒了。如下圖所示的廣告,我點選關閉按鈕,直接跳轉到一個遊戲注冊頁面。無語了,截圖為證,上海10m電信寬帶。