Jquery高亮显示文本中重要的关键字

一、界面预览【完整示例下载】

鼠标放到右边的Tab按钮上，文字透明度降低，同时一段文字高亮显示，效果如下：

Demo地址：http://5thirtyone.com/sandbox/samples/fadefocus/
很绚丽的效果幺！

二、实现原理

将要高亮显示的文字加上<span>段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性，使用Jquery给段落动态添加样式类。

三、HTML代码

1. <div class="wrapper"> 
2.     <ul class="entity-results"> 
3.         <li><a class="d1" href="#">Summary</a></li> 
4.         <li><a class="d2" href="#">Avatar</a></li> 
5.         <li><a class="d3" href="#">Formats</a></li> 
6.     </ul> 
7.     <div class="content"> 
8.         <h2> 
9.             Avatar (2009 film)</h2> 
10.         <div class="entity-source"> 
11.             <img src="images/avatar.jpg" alt="Avatar poster" /> 
12.             <p> 
13.                 Avatar, also known as James Cameron's Avatar, is an American 3-D science fiction 
14.                 epic film written and directed by <a href="http://en.wikipedia.org/wiki/James_Cameron"> 
15.                     James Cameron</a>, and was released on December 16, 2009 by 20th Century Fox. 
16.                 The film is co-produced by <a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment"> 
17.                     Lightstorm Entertainment</a>, and <span class="d1">focuses on an epic conflict on Pandora</span>, 
18.                 an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting 
19.                 <a href="http://en.wikipedia.org/wiki/Alpha_Centauri_A">Alpha Centauri A</a>. On 
20.                 Pandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora, 
21.                 the Na'vi, engage in a war over the planet's resources and the latter's continued 
22.                 existence. The film's title refers to <span class="d2">an avatar, a representation of 
23.                     a real person in a virtual world</span>.</p> 
24.             <p> 
25.                 <span class="d3">The film was released in 2D and 3D formats</span>, along with an 
26.                 IMAX 3D release in selected theaters. The film is being touted as a breakthrough 
27.                 in terms of filmmaking technology, for its development of 3D viewing and stereoscopic 
28.                 filmmaking with cameras that were specially designed for the film's production.</p> 
29.             <p> 
30.                 Read the rest of the <a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">original 
31.                     Wikipedia page about Avatar</a></p> 
32.             <div class="mask"> 
33.             </div> 
34.         </div> 
35.     </div> 
36. </div> 

entity-results类中显示了Tab按钮，每个按钮控制左边文字的透明度，段落文字的高亮显示。
entity-source类中有三个段落span Calss分别为 d1 d2 d3，也就是高亮文字段落。
class=”mask”的空div放到最后，此Div也就是一个遮罩层。
四、CSS关键代码

1. .entity-source, .entity-source span.show 
2. { 
3.     position: relative; 
4. } 
5. .entity-source .mask 
6. { 
7.     display: none; 
8.     position: absolute; 
9.     top: 0; 
10.     left: 0; 
11.     height: 100%; 
12.     width: 100%; 
13.     z-index: 1; 
14. } 
15. .entity-source span 
16. { 
17.     z-index: 2; 
18. } 
19. .entity-source span.show 
20. { 
21.     background: #ffc; 
22.     color: #000; 
23. } 
24.   

类mask中的z-index:1 使得<div class=”mask”> 覆盖在左边文字内容之上。
z-nidex：2又使得span段落覆盖在<div class=”mask”>之上。从而显示实现了段落文字高亮显示。
五、Jquery代码

1. jQuery(document).ready(function($) { 
2.     // mask source 控制mask的动画效果 
3.     var maskSource = jQuery('.mask'); 
4.     jQuery('.entity-results').hover(function() { 
5.         maskSource.animate({opacity:0.7},1).fadeIn('750'); 
6.     }, function() { 
7.         maskSource.fadeOut('1000'); 
8.     }); 
9.   
10.     // match hover 控制段落的高亮显示 
11.     var sample1 = jQuery('span.d1'); 
12.     var sample2 = jQuery('span.d2'); 
13.     var sample3 = jQuery('span.d3'); 
14.     jQuery('a.d1').hover(function() { 
15.         sample1.addClass('show');   //给段落添加类 
16.     }, function() { 
17.         sample1.removeClass('show'); //移除段落类 
18.     }); 
19.     jQuery('a.d2').hover(function() { 
20.         sample2.addClass('show'); 
21.     }, function() { 
22.         sample2.removeClass('show'); 
23.     }); 
24.     jQuery('a.d3').hover(function() { 
25.         sample3.addClass('show'); 
26.     }, function() { 
27.         sample3.removeClass('show'); 
28.     }); 
29. }); 

动画函数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) 在动画完成时执行的函数