彈跳特效指的是在網(wǎng)站建設時，任何調(diào)用該方法的對象都被設置為彈跳顯示效果，利用該效果可以設計各種晃動行為，以便在網(wǎng)頁設計中設計一種富有動態(tài)化的交互視覺。本示例利用jQuery彈跳特效設計交互行為，當在鼠標經(jīng)過小球時，呈現(xiàn)彈跳顯示效果，以增強界面的游戲互動特性。
【操作步驟】
第1步，啟動Dreamweaver，打開本節(jié)示例中的orig.html文件，另存為effect.html。
第2步，把光標置于頁面中，選擇【插入】|【圖像】|【圖像】命令，在頁面中插入一個小球，在【屬性】面板中設置小球?qū)挾葹?00像素?！?/p>
第3步，選中標簽<div id="apDiv1">，選擇【窗口】|【行為】命令，打開【行為】面板，單擊加號按鈕，從彈出的下拉菜單中選擇【效果】|Bounce命令。
第4步，打開Bounce對話框，設置【目標元素】為“<當前選定內(nèi)容>”，【效果持續(xù)時間】為1000ms，即一秒鐘；設置【可見性】為hide，即效果結(jié)束后隱藏元素；設置【方向】為up，即定義目標對象向上彈跳，定義【距離】為50像素，【次】為5次。設置完畢，單擊【確定】按鈕完成操作。
第5步，在【行為】面板中可以看到新增加的行為，單擊左側(cè)的onClick，從彈出的下拉菜單中選擇onMouseOver，即設計當鼠標經(jīng)過正文區(qū)域時，將觸發(fā)彈跳特效。
第6步，繼續(xù)模仿第3、4、5步操作，再添加一個Bounce特效，設置【目標元素】為“<當前選定內(nèi)容>”，【效果持續(xù)時間】為1000ms，即一秒鐘；設置【可見性】為show，即效果結(jié)束后顯示元素；設置【方向】為up，即定義目標對象向上彈跳，定義【距離】為50像素，【次】為5次，設置如圖7.56所示。設置完畢，單擊【確定】按鈕完成操作。
第7步，在【行為】面板中修改事件類型，單擊左側(cè)的onClick，從彈出的下拉菜單中選擇on-MouseOver，即設計當鼠標經(jīng)過時，將觸發(fā)彈跳特效，然后單擊向下箭頭按鈕，把當前行為移到下面，讓該行為在上一步定義的行為之后發(fā)生。
第8步，按Ctrl+S快捷鍵保存頁面，此時Dreamweaver會彈出對話框，提示保存兩個插件文件。單擊【確定】按鈕，保存jquery-1.8.3.min.js和jquery-ui-effects.cus-tom.min.js兩個庫文件。
第9步，在瀏覽器中預覽，當鼠標移到摘要正文上時，文字會高亮顯示并逐步隱藏，然后再恢復正常顯示。
提示：Dreamweaver在制作網(wǎng)頁時定制的jQuery高亮特效，實際上與jQuery原生的高亮特效所產(chǎn)生的效果是不同的，Dreamweaver強化了高亮顯示后顯示或隱藏對象，而不是保持對象默認的顯示狀態(tài)。因此，Dreamweaver的高亮特效適合設計漸隱、漸顯特效。如果希望使用Dreamweaver的Highlight特效設計高亮顯示，必須使用兩個Highlight行為疊加設計，方法如本節(jié)示例。