在網(wǎng)頁(yè)設(shè)計(jì)中制作彈跳的小球

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

【操作步驟】

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

第2步,把光標(biāo)置于頁(yè)面中,選擇【插入】|【圖像】|【圖像】命令,在頁(yè)面中插入一個(gè)小球,在【屬性】面板中設(shè)置小球?qū)挾葹?00像素?!?/p>

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

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

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

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

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

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

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

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


網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢專(zhuān)線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))