首页 »博文摘选 » jquery插件:Jquery高亮显示文本中重要的关键字 »正文
jquery插件:Jquery高亮显示文本中重要的关键字
来源: 发布时间:星期四, 2009年12月24日 浏览:54次 评论:0
 、界面预览
鼠标放到右边 Tab按钮上 文字透明度降低同时段文字高亮显示效果如下:
Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus/
很绚丽效果幺！
2、实现原理
将要高亮显示文字加上<span>段落标记  =”mask”div 做为遮罩层使此遮罩层位于文字内容的上(z-index属性使用Jquery给段落动态添加样式类
3、HTML代码
<div ="wrapper">
<ul ="entity-results">
<li><a ="d1" href="#">Summary</a></li>
<li><a ="d2" href="#">Avatar</a></li>
<li><a ="d3" href="#">Formats</a></li>
</ul>
<div ="content">
<h2>
Avatar (2009 film)</h2>
<div ="entity-source">
<img src="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 _disibledevent=> The film is co-produced by <a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment">
Lightstorm Entertainment</a>, and <span ="d1">focuses _disibledevent=></span>,
an inhabited Earth-sized moon of Polyphemus, _disibledevent=> <a href="http://en.wikipedia.org/wiki/Alpha_Centauri_A">Alpha Centauri A</a>. _disibledevent=> 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 ="d2">an avatar, a representation of
a real person in a virtual world</span>.</p>
<p>
<span ="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  through
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 ="mask">
</div>
</div>
</div>
</div>
entity-results类中显示了Tab按钮每个按钮控制左边文字透明度段落文字高亮显示
entity-source类中有 3个段落span Calss分别为 d1 d2 d3也就是高亮文字段落
=”mask”空div放到最后此Div也就是个遮罩层
4、CSS关键代码
.entity-source, .entity-source span.show
{
position: relative;
}
.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;
}
类mask中z-index:1 使得<div =”mask”> 覆盖在左边文字内容的上
z-nidex:2又使得span段落覆盖在<div =”mask”>的上从而显示实现了段落文字高亮显示
5、Jquery代码
jQuery(document).ready(function($) {
// mask source 控制mask动画效果
var maskSource = jQuery('.mask'
|
