網(wǎng)站在設(shè)計(jì)過程中，不管是從視覺效果還是從用戶提樣上來說，網(wǎng)站制作人員都會(huì)遇見各種各樣的特效，深圳網(wǎng)站制作公司-博納網(wǎng)絡(luò)在本文就在頁面設(shè)計(jì)中遇見的高亮顯示效果實(shí)操經(jīng)驗(yàn)進(jìn)行分享。
如何制作高亮顯示文本
高亮特效指的是任何調(diào)用該方法的對(duì)象都被設(shè)置為高亮顯示效果，即設(shè)置背景色為高亮顯示，然后再恢復(fù)默認(rèn)樣式。這種效果常用來設(shè)計(jì)交互提示作用。如鼠標(biāo)經(jīng)過數(shù)據(jù)行時(shí)，表格行呈現(xiàn)高亮顯示效果，或者鼠標(biāo)單擊目標(biāo)對(duì)象時(shí)，讓目標(biāo)對(duì)象高亮顯示一下，以示界面友好。
本示例利用JQuery高亮特效設(shè)計(jì)段落文本在鼠標(biāo)經(jīng)過時(shí)，呈現(xiàn)高亮閃現(xiàn)效果，以增強(qiáng)文本的互動(dòng)特性。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，打開本節(jié)示倒中的orig. html文件，另存為effect. html。在本示例中設(shè)計(jì)一個(gè)數(shù)據(jù)表格版面，當(dāng)鼠標(biāo)經(jīng)過時(shí)定義數(shù)據(jù)行能夠高亮閃現(xiàn)下，以提示用戶留意和注意。
第2步，把光標(biāo)置于數(shù)據(jù)行第1行，然后拖選第1行，在【屬性】面板中定義第1行<tr>標(biāo)簽的ID值為t1如圖7-44所示。
網(wǎng)站設(shè)計(jì)制作高亮效果實(shí)操示意圖7-44設(shè)置文本為二級(jí)標(biāo)題
第3步，以同樣的方式，分別拖選第2行、第3行、第4行等，在【屬性】面板中分別設(shè)置ID值為t2、t3、t4等，如圖7-45所示。
設(shè)計(jì)高亮效果制作實(shí)操示意圖7-45定義標(biāo)題樣式
第4步選中第2行標(biāo)簽<tr id:”tl”>．選擇【窗口】 【行為】命令打開【行為】面板，單擊加號(hào)按鈕從彈出的下拉菜單中選擇【效果】Highligh1命令，如圖7-46所示。
第5步，打開Highlight對(duì)話框，設(shè)置【目標(biāo)元素】為“<當(dāng)前選定內(nèi)容>”
即效果結(jié)束后隱藏元素；設(shè)置【顏色】為#ffff99，即定義而亮顏色為亮黃色
【效果持續(xù)時(shí)間】hiOOOms．即秒鐘；設(shè)置【可見性】為hide，實(shí)操效果設(shè)置如圖7-47所示。設(shè)置完畢，點(diǎn)擊【確定】按鈕完成操作。
網(wǎng)站設(shè)計(jì)實(shí)操高亮效果示意圖7-47設(shè)置Highlight對(duì)話框
第6步，在【行為】面板中可以看到新增加的行為，單擊左側(cè)的onClick，從彈出的下拉菜單中選擇onMouseOver．即設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過正文區(qū)域時(shí)，將觸發(fā)高亮特效，設(shè)置如圖7-48所示。
網(wǎng)站設(shè)計(jì)實(shí)操高亮效果觸發(fā)示意圖7-48修改觸發(fā)事件
第7步，繼續(xù)模仿第4、5、6步操作，再添加個(gè)Highlight特效，設(shè)置如圖7-49所示。
其中設(shè)置【目標(biāo)元素】為“<當(dāng)前選定內(nèi)容>”，【效果持續(xù)時(shí)間】為1OOms，即十分之秒鐘；設(shè)置【可見性】為show，即效果結(jié)束后顯示元素；設(shè)置【顏色】為#ffff99，即定義高亮顏色為亮黃色，然后單擊【確定】按鈕完成操作。
第8步，在【行為】面板中可以看到新增加的行為，單擊左側(cè)的onClick，從彈出的下拉菜單中選擇onMouseOver，即設(shè)計(jì)當(dāng)鼠標(biāo)經(jīng)過正文區(qū)域時(shí)，將觸發(fā)高亮特效，然后單擊同下箭頭按鈕把當(dāng)前行為移到下面，讓該行為在上步定義的行為之后發(fā)生。
第9步，按Ctrl+S快捷鍵保存頁面，此時(shí)Dreamweaver會(huì)彈出對(duì)話框，提示保存兩個(gè)插件文件，如圖7-50所示。單擊【確定】按鈕，保存jquery-l.83min.js和jquery-ui-effects cust omlnin.js兩個(gè)庫文件。
網(wǎng)站設(shè)計(jì)實(shí)操示意圖7-50保存插件所需要的庫文件
第10步，以同樣的方式為其他數(shù)據(jù)行綁定高亮隱藏和顯示特效。
第11步，在瀏覽器中預(yù)覽，當(dāng)鼠標(biāo)移到摘要正文上時(shí)，文字會(huì)高亮顯示并逐步隱藏，然后再恢復(fù)正常顯示，演示效果如圖7-51所示。
深圳網(wǎng)站設(shè)計(jì)公司關(guān)于網(wǎng)頁制作時(shí)對(duì)于高亮效果現(xiàn)實(shí)與隱藏的處理方式本文就介紹到這里，喜歡本站的朋友敬請(qǐng)持續(xù)關(guān)注本站，深圳網(wǎng)站制作-博納網(wǎng)絡(luò)會(huì)定期更新這一類型的經(jīng)驗(yàn)文章。
