在網頁設計中,高亮特效指的是任何調用該方法的對象都被設置為高亮顯示效果,即設置背景色為高亮顯示,然后再恢復默認樣式。這種效果常用來在網站建設時設計交互提示作用,如鼠標經過數據行時,表格行呈現高亮顯示效果,或者鼠標單擊目標對象時,讓目標對象高亮顯示一下,以示界面友好。
本示例利用jQuery高亮特效設計段落文本在鼠標經過時,呈現高亮閃現效果,以增強文本的互動特性。
【操作步驟】
第1步,啟動Dreamweaver,打開本節示例中的orig.html文件,另存為effect.html。在本示例中設計一個數據表格版面,當鼠標經過時,定義數據行能夠高亮閃現一下,以提示用戶留意和注意。
第2步,把光標置于數據行第1行,然后拖選第1行,在【屬性】面板中定義第1行<tr>標簽的ID值為t。
第3步,以同樣的方式,分別拖選第2行、第3行、第4行等,在【屬性】面板中分別設置ID值為t2、t3、t4等。
第4步,選中第2行標簽<tr id="t1">,選擇【窗口】|【行為】命令,打開【行為】面板,單擊加號按鈕,從彈出的下拉菜單中選擇【效果】|Highlight命令。
第5步,打開Highlight對話框,設置【目標元素】為“<當前選定內容>”,【效果持續時間】為1000ms,即一秒鐘;設置【可見性】為hide,即效果結束后隱藏元素;設置【顏色】為#ffff99,即定義高亮顏色為亮黃色。設畢,單擊【確定】按鈕完成操作。
第6步,網頁設計時,在【行為】面板中可以看到新增加的行為,單擊左側的onClick,從彈出的下拉菜單中選擇onMouseOver,即設計當鼠標經過正文區域時,將觸發高亮特效
第7步,繼續模仿第4、5、6步操作,再添加一個Highlight特效,設置如圖7.49所示。其中設置【目標元素】為“<當前選定內容>”,【效果持續時間】為100ms,即十分之一秒鐘;設置【可見性】為show,即效果結束后顯示元素;設置【顏色】為#ffff99,即定義高亮顏色為亮黃色,然后單擊【確定】按鈕完成操作。
第8步,在【行為】面板中可以看到新增加的行為,單擊左側的onClick,從彈出的下拉菜單中選擇onMouseOver,即設計當鼠標經過正文區域時,將觸發高亮特效,然后單擊向下箭頭按鈕,把當前行為移到下面,讓該行為在上一步定義的行為之后發生。
第9步,按Ctrl+S快捷鍵保存頁面,此時Dreamweaver會彈出對話框,提示保存兩個插件文件。單擊【確定】按鈕,保存jquery-1.8.3.min.js和jquery-ui-effects.cus-tom.min.js兩個庫文件。
第10步,以同樣的方式為其他數據行綁定高亮隱藏和顯示特效。
第11步,在瀏覽器中預覽,當鼠標移到摘要正文上時,文字會高亮顯示并逐步隱藏,然后再恢復正常顯示。
當前文章標題:制作高亮顯示文本
當前URL:http://www.ccaudelo.com/news/wzzz/3126.html
上一篇:制作提示對話框
下一篇:在網頁設計中制作彈跳的小球