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

核心提示：一、界面预览 查看原图（大图）鼠标放到右边的Tab按钮上，文字透明度降低，Jquery高亮显示文本中重要的关键字，同时一段文字高亮显示，效果如下：Demo地址：http://5thirtyone.com/sandbox/samples/fadefocus/很绚丽的效果幺！二、实现原理将要高亮显示的文字加上<spa

一、界面预览

查看原图（大图）

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

Demo地址：http://5thirtyone.com/sandbox/samples/fadefocus/

很绚丽的效果幺！

二、实现原理

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

三、HTML代码

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