在網(wǎng)絡(luò)時(shí)代的今天，各行各業(yè)對(duì)于網(wǎng)絡(luò)的依賴日益增加，很多公司都希望有一個(gè)展示自己公司形象以及產(chǎn)品的網(wǎng)絡(luò)平臺(tái)。對(duì)于以網(wǎng)站建設(shè)制作為主要服務(wù)的公司以及網(wǎng)站設(shè)計(jì)從業(yè)人員的設(shè)計(jì)技巧來(lái)說(shuō)是一個(gè)激勵(lì)。本文今天就這個(gè)話題，分享我們的網(wǎng)頁(yè)設(shè)計(jì)師是如何應(yīng)客戶的要求在網(wǎng)頁(yè)開(kāi)篇設(shè)計(jì)一個(gè)彈跳的小球以增加網(wǎng)站的互動(dòng)性視覺(jué)效果。制作彈跳的小球，彈跳特效指的是任何調(diào)用該方法的對(duì)象都被設(shè)置為彈跳顯示效果，利用該效果可以設(shè)計(jì)各種晃動(dòng)行為，以便設(shè)計(jì)一種富有動(dòng)態(tài)化的交互視覺(jué)。
深圳網(wǎng)站設(shè)計(jì)公司本示例利用iQuerv彈跳特效沒(méi)汁交互行為，當(dāng)在鼠標(biāo)經(jīng)過(guò)小球時(shí)呈現(xiàn)彈跳顯示效果，以增強(qiáng)界面的游戲互動(dòng)特性。
【操作步驟】
第1步，啟動(dòng)Dremuweaver，打開(kāi)本節(jié)示例中的orig.html文件，另存為effect.htnll。
第2步，把光標(biāo)置于頁(yè)面中，選擇【插入】【圖像】【圖像】命令，在頁(yè)面中插入個(gè)小球，在【屬性】面板中設(shè)置小球?qū)挾?為300像素，如圖7-52所示。
網(wǎng)站設(shè)計(jì)互動(dòng)效果實(shí)操示意圖7-52插入小球
第3步，選中標(biāo)簽<div id:”apDivl”>，選擇【窗口】 【行為】命令，打開(kāi)【行為】面板，單擊加號(hào)按鈕，從彈出的下拉菜單中選擇【效果】 Bounce命令，如圖7-53所示。
第4步，打開(kāi)Bounce對(duì)話框，設(shè)置【目標(biāo)元素】為“<當(dāng)前選定內(nèi)容>”，【效果持續(xù)時(shí)間】為1OOOms，即秒鐘；設(shè)置【可見(jiàn)性】為hide，即效果結(jié)束后隱藏元素；設(shè)置【方向】為up，即定義目標(biāo)對(duì)象向上彈跳，定義【距離】為50像素，【次】為5次，設(shè)置如圖7-54所示。設(shè)置完畢，單擊【確定】按鈕完成操作。
第5步，在【行為】面板中可以看到新增加的行為，單擊左側(cè)的onClick，從彈出的下拉菜單中選擇onMouseOver，即設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)正文區(qū)域時(shí)，將觸發(fā)彈跳特效，設(shè)置如圖7-55所示。
網(wǎng)站設(shè)計(jì)彈跳球?qū)嵅偈疽鈭D7-55修改觸發(fā)事件
第6步，繼續(xù)懂仿第3、4、5步操作，再添加個(gè)Bounce特效，設(shè)置【目標(biāo)元素為“<當(dāng)前選定內(nèi)容>’【效果持續(xù)時(shí)間】為lOOOms，即1秒鐘；沒(méi)置【可見(jiàn)性】show，即效果結(jié)束后顯示元素；設(shè)置【方向】為up，即定更目標(biāo)對(duì)象向上彈跳，定義【距離】為50像素，設(shè)置完畢，單擊【確定】按鈕完成操作。
第7步，在【行為】面板中修改事件類型，單擊左側(cè)的onClick，從彈出的下拉菜單中選擇onMouseOver，即設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，將觸發(fā)彈跳特效，然后單擊向下箭頭按鈕，把當(dāng)前行為移到下面，讓該行為在上步定義的行為之后發(fā)生，設(shè)置如圖7-57所示。
網(wǎng)站設(shè)計(jì)彈跳球效果實(shí)操示意圖修改觸發(fā)事件并調(diào)整響應(yīng)順序
第8步按Ctrl+S快捷鍵保存頁(yè)面，此時(shí)Dreamweaver會(huì)彈出對(duì)話框，提示保存兩個(gè)插件文件，如圖7-58所示。單擊【確定】按鈕，保存jquerv-l.8.3min.jsjquery-ui-effectscustommin.js兩個(gè)庫(kù)文件。
第9步，在瀏覽器中預(yù)覽，當(dāng)鼠標(biāo)移到摘要正文上時(shí)，文字會(huì)高亮顯示并逐步隱藏，然后再恢復(fù)正常顯示，演示效果如圖7-59所示。
提示：Dreamweaver定制的iQuery高亮特效，實(shí)際上與iQuery原生的高亮特效所產(chǎn)生的效果是不同的，Dreamweaver強(qiáng)化了高亮顯示后顯示或隱藏對(duì)象，而不是保持對(duì)象默認(rèn)的顯示狀態(tài)。因此．Dreamweaver的高亮特效適合設(shè)計(jì)漸隱、漸顯特效。如果希望使用Dreamweaver的Highlight特效設(shè)計(jì)高亮顯示，必須使用兩Highlight行為疊加設(shè)計(jì)，方法如本文示例。深圳網(wǎng)站設(shè)計(jì)公司關(guān)于網(wǎng)站制作時(shí)在頁(yè)面設(shè)計(jì)彈跳球效果的實(shí)操案例經(jīng)驗(yàn)分享，本文就到這里。喜歡本站的朋友請(qǐng)持續(xù)關(guān)注本站。博納網(wǎng)絡(luò)編輯整理。
