您當前位置：首頁 > web前端 > jquery > Jquery高亮顯示文本中重要的關鍵字

Jquery高亮顯示文本中重要的關鍵字

來源：程序員人生發布時間：2013-10-31 02:19:05 閱讀次數：3860次

　　一、界面預覽

　　鼠標放到右邊的Tab按鈕上，文字透明度降低，同時一段文字高亮顯示，效果如下：

　　二、實現原理

　　將要高亮顯示的文字加上<span>段落標記， class=”mask”的div 做為遮罩層，使此遮罩層位于文字內容之上（z-index屬性，使用Jquery給段落動態添加樣式類。

　　三、HTML代碼：

　　entity-results類中顯示了Tab按鈕，每個按鈕控制左邊文字的透明度，段落文字的高亮顯示。
　　entity-source類中有三個段落span Calss分別為 d1 d2 d3，也就是高亮文字段落。
　　class=”mask”的空div放到最后，此Div也就是一個遮罩層。

　　四、CSS關鍵代碼

　　類mask中的z-index:1 使得<div class=”mask”> 覆蓋在左邊文字內容之上。z-nidex：2又使得span段落覆蓋在<div class=”mask”>之上。從而顯示實現了段落文字高亮顯示。

　　五、Jquery代碼

　　動畫函數animate(params, [duration], [easing], [callback])

　　Params：一組包含作為動畫屬性和終值的樣式屬性和及其值的集合

　　duration (可選)：種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

　　easing (可選)：要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".

　　callback (可選)：在動畫完成時執行的函數

　　淡入效果函數：fadeIn(speed, [callback])

　　Speed：三種預定速度之一的字符串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

　　callback (可選)：(Optional) 在動畫完成時執行的函數

　　淡出效果函數：fadeOut解釋同fadeIn

　　六：最終效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/><title>Jquery高亮顯示文本中重要的關鍵字 - Liehuo.Net</title><script src="http://www.jyygyx.com/uploads/Common/jquery-1.3.2.min.js" type="text/javascript" charset="GBK"></script><script type="text/javascript">jQuery(document).ready(function($) {// mask sourcevar maskSource = jQuery('.mask');jQuery('.entity-results').hover(function() {maskSource.animate({opacity:0.7},1).fadeIn('750');}, function() {maskSource.fadeOut('1000');});// match hovervar sample1 = jQuery('span.d1');var sample2 = jQuery('span.d2');var sample3 = jQuery('span.d3');jQuery('a.d1').hover(function() {sample1.addClass('show');}, function() {sample1.removeClass('show');});jQuery('a.d2').hover(function() {sample2.addClass('show');}, function() {sample2.removeClass('show');});jQuery('a.d3').hover(function() {sample3.addClass('show');}, function() {sample3.removeClass('show');});});</script><style>body {font:13px helvetica,arial,sans-serif;background:#eee;color:#333;}html,body,#sample h1 {margin:0;}html,body,.entity-results {padding:0;}#sample,.entity-results a {display:block;}#sample {width:100%;}#sample,.wrapper,.entity-source .mask {background-color:#fff;}#sample {border-bottom:1px solid #ccc;text-align:center;}#sample h1 {padding:15px 10px 16px;font-size:18px;}.wrapper,.entity-source,.entity-source span.show {position:relative;}.wrapper,.content img {border:1px solid #ccc;border-left-color:#aaa;border-bottom-color:#aaa;}.wrapper {width:520px;margin:60px auto;padding:25px 0 10px;}a {color:#900;text-decoration:none;background:#fff0f0;}a,.entity-source span {padding:0 2px;margin:0 -2px;}a:hover {background:#ffd8d8;}.content {width:360px;margin:0 0 0 20px;}.content h2 {font-size:21px;margin:0 0 10px;}.content p {margin:0 0 15px;line-height:18px;}.content img {float:left;padding:2px;margin:4px 10px 0 0;}.entity-results {float:right;list-style:none;margin:0 -10px 0 0;}.entity-results li {margin-bottom:2px;}.entity-results a {background:#900;color:#eee;line-height:28px;width:120px;padding-left:7px;}.entity-results a:hover {background:#5c0000;}.entity-source .mask {display:none;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;}.entity-source span {z-index:2;}.entity-source span.show {background:#ffc;color:#000;}</style></head><body><div id="sample"><h1>Jquery高亮顯示文本中重要的關鍵字<a href="http://www.jyygyx.com/">(網)</a></h1></div><div class="wrapper"><ul class="entity-results"><li><a class="d1" href="http://alexa.liehuo.net">排名</a></li><li><a class="d2" href="http://www.jyygyx.com/">流量</a></li><li><a class="d3" href="http://www.jyygyx.com/news/">網頁</a></li></ul><div class="content"><h2>迎圣誕與新年網Alexa沖一萬</h2><div class="entity-source"><P>網(LieHuo.Net)消息 <span class="d1">喜迎圣誕與新年，網今日排名達到12,426，直沖一萬以內，長久以來，有很多朋友在問我網到底有多少流量？</span>按Chinaz顯示的IP和PV的估計值，網的日IP在5萬左右，<span class="d2">我可以很負責的告訴大家：站長站的估計值差不多，目前各個頻道的IP總和約：4.6萬左右，PV大概8萬多。</span></P><P align=left>　　<span class="d3">我們一直在努力的為網頁設計、WEB開發和網站運營提供動力！</span></P><div class="mask"></div></div></div></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

　　英文地址：http://5thirtyone.com/archives/2206

　　翻譯作者：http://www.cnblogs.com/ywqu/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 企業如何在互聯網上推廣產品

下一篇 wifi共享精靈怎么用

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

Jquery高亮顯示文本中重要的關鍵字