JQuery UI如何製作顏色動畫
來源:酷知科普網 2.98W
工具/材料
Sublime Text
操作方法
先開啟Sublime Text,然後在編輯器中添加HTML5頁面,如下圖所示,由於頁面中中文,所以編碼需要設定成utf-8的格式
接下來需要下載Jquery UI的庫檔案,並且在HTML中匯入Jquery UI的樣式庫檔案,如下圖所示
由於顏色動畫特效需要JS腳本控制,所以需要匯入Jquery的腳本和Jquery ui的腳本,如下圖所示。因爲Jquery ui是用jquery編寫的,所以先匯入Jquery檔案
然後在body標籤中添加一個div和一個按鈕。Div標籤是我們要操作的顏色塊,按鈕用來觸發動畫操作,如下圖所示
接下來在頁面中添加style標籤,併爲上面設定的div顏色塊來添加樣式,如下圖所示
然後在script標籤中添加我們腳本代碼,如下圖所示,透過調用animate方法進行動畫調用,它可以直接指定顏色塊的背景顏色
最後,我們執行頁面程序,你會在頁面中看到一個顏色塊和一個按鈕,點擊按鈕以後,顏色塊發生變化了,如下圖所示