Jquery⾼亮显⽰⽂本中重要的关键字
⼀、界⾯预览
⿏标放到右边的Tab按钮上，⽂字透明度降低，同时⼀段⽂字⾼亮显⽰，效果如下：
很绚丽的效果⼳！
⼆、实现原理
将要⾼亮显⽰的⽂字加上<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="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="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="/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="/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="/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="/wiki/Avatar_(2009_film)">original
Wikipedia page about Avatar</a></p>
<div class="mask">
</div>
</div>
</div>
</div>
entity-results类中显⽰了Tab按钮，每个按钮控制左边⽂字的透明度，段落⽂字的⾼亮显⽰。entity-source类中有三个段落span Calss分别为 d1 d2 d3，也就是⾼亮⽂字段落。
class=”mask”的空div放到最后，此Div也就是⼀个遮罩层。
四、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 class=”mask”> 覆盖在左边⽂字内容之上。
z-nidex：2⼜使得span段落覆盖在<div class=”mask”>之上。从⽽显⽰实现了段落⽂字⾼亮显⽰。
五、Jquery代码
jQuery(document).ready(function($) {
jquery字符串截取// mask source 控制mask的动画效果
var maskSource = jQuery('.mask');
jQuery('.entity-results').hover(function() {
maskSource.animate({opacity:0.7},1).fadeIn('750');
}, function() {
maskSource.fadeOut('1000');
});
// match hover 控制段落的⾼亮显⽰
var sample1 = jQuery('span.d1');
var sample2 = jQuery('span.d2');
var sample3 = jQuery('span.d3');
jQuery('a.d1').hover(function() {
sample1.addClass('show');  //给段落添加类
}, function() {
});
jQuery('a.d2').hover(function() {
sample2.addClass('show');
}, function() {
});
jQuery('a.d3').hover(function() {
sample3.addClass('show');
}, function() {
});
});
动画函数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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。