工具/材料SublimeText
操作方法01、先打開SublimeText，然后在編輯器中添加HTML5頁面，如下圖所示，由于頁面中中文，所以編碼需要設(shè)置成utf-8的格式
02、接下來需要下載Jquery UI的庫文件，并且在HTML中導(dǎo)入JqueryUI的樣式庫文件，如下圖所示
03、由于顏色動(dòng)畫特效需要JS腳本控制，所以需要導(dǎo)入Jquery的腳本和Jquery ui的腳本，如下圖所示 。因?yàn)镴query ui是用jquery編寫的，所以先導(dǎo)入Jquery文件
【JQuery UI如何制作顏色動(dòng)畫】04、然后在body標(biāo)簽中添加一個(gè)div和一個(gè)按鈕 。Div標(biāo)簽是我們要操作的顏色塊，按鈕用來觸發(fā)動(dòng)畫操作 ， 如下圖所示
05、接下來在頁面中添加style標(biāo)簽 ， 并為上面設(shè)置的div顏色塊來添加樣式，如下圖所示
06、然后在script標(biāo)簽中添加我們腳本代碼，如下圖所示，通過調(diào)用animate方法進(jìn)行動(dòng)畫調(diào)用，它可以直接指定顏色塊的背景顏色
07、最后 ， 我們運(yùn)行頁面程序，你會(huì)在頁面中看到一個(gè)顏色塊和一個(gè)按鈕，點(diǎn)擊按鈕以后，顏色塊發(fā)生變化了，如下圖所示
推薦閱讀
- 如何免費(fèi)將PDF轉(zhuǎn)換成Word文檔
- 如何應(yīng)用Bootstrap的模態(tài)框
- 如何使用秀堂制作最簡單的H5/微場景
- 如何對(duì)Oracle的用戶進(jìn)行管理
- 如何在mysql控制臺(tái)中查看數(shù)據(jù)庫表
- Angular如何應(yīng)用timeout服務(wù)
- Word 2010如何修改字符底紋
- 如何在word文檔中插入空白頁
- sql數(shù)據(jù)庫如何設(shè)置主鍵自增長
- 在Access中如何給表設(shè)置主鍵