彈跳特效指的是在網(wǎng)站建設時(shí)，任何調用該方法的對象都被設置為彈跳顯示效果，利用該效果可以設計各種晃動(dòng)行為，以便在網(wǎng)頁(yè)設計中設計一種富有動(dòng)態(tài)化的交互視覺(jué)。本示例利用jQuery彈跳特效設計交互行為，當在鼠標經(jīng)過(guò)小球時(shí)，呈現彈跳顯示效果，以增強界面的游戲互動(dòng)特性。

【操作步驟】

第1步，啟動(dòng)Dreamweaver，打開(kāi)本節示例中的orig.html文件，另存為effect.html。

第2步，把光標置于頁(yè)面中，選擇【插入】|【圖像】|【圖像】命令，在頁(yè)面中插入一個(gè)小球，在【屬性】面板中設置小球寬度為300像素?！?/p>

第3步，選中標簽<div id="apDiv1">，選擇【窗口】|【行為】命令，打開(kāi)【行為】面板，單擊加號按鈕，從彈出的下拉菜單中選擇【效果】|Bounce命令。

第4步，打開(kāi)Bounce對話(huà)框，設置【目標元素】為“<當前選定內容>”，【效果持續時(shí)間】為1000ms，即一秒鐘；設置【可見(jiàn)性】為hide，即效果結束后隱藏元素；設置【方向】為up，即定義目標對象向上彈跳，定義【距離】為50像素，【次】為5次。設置完畢，單擊【確定】按鈕完成操作。

第5步，在【行為】面板中可以看到新增加的行為，單擊左側的onClick，從彈出的下拉菜單中選擇onMouseOver，即設計當鼠標經(jīng)過(guò)正文區域時(shí)，將觸發(fā)彈跳特效。

第6步，繼續模仿第3、4、5步操作，再添加一個(gè)Bounce特效，設置【目標元素】為“<當前選定內容>”，【效果持續時(shí)間】為1000ms，即一秒鐘；設置【可見(jiàn)性】為show，即效果結束后顯示元素；設置【方向】為up，即定義目標對象向上彈跳，定義【距離】為50像素，【次】為5次，設置如圖7.56所示。設置完畢，單擊【確定】按鈕完成操作。

第7步，在【行為】面板中修改事件類(lèi)型，單擊左側的onClick，從彈出的下拉菜單中選擇on-MouseOver，即設計當鼠標經(jīng)過(guò)時(shí)，將觸發(fā)彈跳特效，然后單擊向下箭頭按鈕，把當前行為移到下面，讓該行為在上一步定義的行為之后發(fā)生。

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

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

提示：Dreamweaver在制作網(wǎng)頁(yè)時(shí)定制的jQuery高亮特效，實(shí)際上與jQuery原生的高亮特效所產(chǎn)生的效果是不同的，Dreamweaver強化了高亮顯示后顯示或隱藏對象，而不是保持對象默認的顯示狀態(tài)。因此，Dreamweaver的高亮特效適合設計漸隱、漸顯特效。如果希望使用Dreamweaver的Highlight特效設計高亮顯示，必須使用兩個(gè)Highlight行為疊加設計，方法如本節示例。