在網(wǎng)頁設計中，高亮特效指的是任何調用該方法的對象都被設置為高亮顯示效果，即設置背景色為高亮顯示，然后再恢復默認樣式。這種效果常用來在網(wǎng)站建設時設計交互提示作用，如鼠標經(jīng)過數(shù)據(jù)行時，表格行呈現(xiàn)高亮顯示效果，或者鼠標單擊目標對象時，讓目標對象高亮顯示一下，以示界面友好。

本示例利用jQuery高亮特效設計段落文本在鼠標經(jīng)過時，呈現(xiàn)高亮閃現(xiàn)效果，以增強文本的互動特性。

【操作步驟】

第1步，啟動Dreamweaver，打開本節(jié)示例中的orig.html文件，另存為effect.html。在本示例中設計一個數(shù)據(jù)表格版面，當鼠標經(jīng)過時，定義數(shù)據(jù)行能夠高亮閃現(xiàn)一下，以提示用戶留意和注意。

第2步，把光標置于數(shù)據(jù)行第1行，然后拖選第1行，在【屬性】面板中定義第1行<tr>標簽的ID值為t。

第3步，以同樣的方式，分別拖選第2行、第3行、第4行等，在【屬性】面板中分別設置ID值為t2、t3、t4等。

第4步，選中第2行標簽<tr id="t1">，選擇【窗口】|【行為】命令，打開【行為】面板，單擊加號按鈕，從彈出的下拉菜單中選擇【效果】|Highlight命令。

第5步，打開Highlight對話框，設置【目標元素】為“<當前選定內容>”，【效果持續(xù)時間】為1000ms，即一秒鐘；設置【可見性】為hide，即效果結束后隱藏元素；設置【顏色】為#ffff99，即定義高亮顏色為亮黃色。設畢，單擊【確定】按鈕完成操作。

第6步，網(wǎng)頁設計時，在【行為】面板中可以看到新增加的行為，單擊左側的onClick，從彈出的下拉菜單中選擇onMouseOver，即設計當鼠標經(jīng)過正文區(qū)域時，將觸發(fā)高亮特效

第7步，繼續(xù)模仿第4、5、6步操作，再添加一個Highlight特效，設置如圖7.49所示。其中設置【目標元素】為“<當前選定內容>”，【效果持續(xù)時間】為100ms，即十分之一秒鐘；設置【可見性】為show，即效果結束后顯示元素；設置【顏色】為#ffff99，即定義高亮顏色為亮黃色，然后單擊【確定】按鈕完成操作。

第8步，在【行為】面板中可以看到新增加的行為，單擊左側的onClick，從彈出的下拉菜單中選擇onMouseOver，即設計當鼠標經(jīng)過正文區(qū)域時，將觸發(fā)高亮特效，然后單擊向下箭頭按鈕，把當前行為移到下面，讓該行為在上一步定義的行為之后發(fā)生。

第9步，按Ctrl+S快捷鍵保存頁面，此時Dreamweaver會彈出對話框，提示保存兩個插件文件。單擊【確定】按鈕，保存jquery-1.8.3.min.js和jquery-ui-effects.cus-tom.min.js兩個庫文件。

第10步，以同樣的方式為其他數(shù)據(jù)行綁定高亮隱藏和顯示特效。

第11步，在瀏覽器中預覽，當鼠標移到摘要正文上時，文字會高亮顯示并逐步隱藏，然后再恢復正常顯示。