工具/材料

Sublime Text

操作方法

• 01

  先打開Sublime Text，然后在編輯器中添加HTML5頁面，如下圖所示，由于頁面中中文，所以編碼需要設(shè)置成utf-8的格式

  
• 02

  接下來需要下載Jquery UI的庫文件，并且在HTML中導(dǎo)入Jquery UI的樣式庫文件，如下圖所示

  
• 03

  由于顏色動(dòng)畫特效需要JS腳本控制，所以需要導(dǎo)入Jquery的腳本和Jquery ui的腳本，如下圖所示。因?yàn)镴query ui是用jquery編寫的，所以先導(dǎo)入Jquery文件

  
• 04

  然后在body標(biāo)簽中添加一個(gè)p和一個(gè)按鈕。Div標(biāo)簽是我們要操作的顏色塊，按鈕用來觸發(fā)動(dòng)畫操作，如下圖所示

  
• 05

  接下來在頁面中添加style標(biāo)簽，并為上面設(shè)置的p顏色塊來添加樣式，如下圖所示

  
• 06

  然后在script標(biāo)簽中添加我們腳本代碼，如下圖所示，通過調(diào)用animate方法進(jìn)行動(dòng)畫調(diào)用，它可以直接指定顏色塊的背景顏色

  
• 07

  最后，我們運(yùn)行頁面程序，你會(huì)在頁面中看到一個(gè)顏色塊和一個(gè)按鈕，點(diǎn)擊按鈕以后，顏色塊發(fā)生變化了，如下圖所示