Jquery highlights important keywords in text

I. UI Preview

Move the mouse over the Tab button on the right to reduce the text transparency and highlight a piece of text. The effect is as follows:

 

Demo address: http://5thirtyone.com/sandbox/samples/fadefocus/

Very brilliant!

II. Implementation Principle

 

The text to be highlighted is marked with <span> paragraph, and the div of class = "mask" is used as the mask layer so that the mask layer is placed above the text content (z-index attribute, use Jquery to dynamically add style classes to paragraphs.
Iii. HTML code
Copy codeThe Code is as follows:
<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) <Div class = "entity-source">

<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,200 9 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
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
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>

The Tab button is displayed in the entity-results class. Each button controls the transparency of the text on the left, and the section text is highlighted.
The entity-source class has three paragraphs, span Calss, d1 d2 d3, which are highlighted text paragraphs.
Class = "mask" Empty div put to the end, this Div is also a mask layer.
Iv. Key CSS code
Copy codeThe Code is as follows:
. 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;
}

The z-index: 1 in the mask class causes <div class = "mask"> to overwrite the text on the left.
Z-nidex: 2 overwrites the span section <div class = "mask">. The Section text is highlighted.
V. Jquery code
Copy codeThe Code is as follows:
JQuery (document). ready (function ($ ){
// The mask source controls the animation effect of the mask.
Var maskSource = jQuery ('. mask ');
JQuery ('. entity-results'). hover (function (){
MaskSource. animate ({opacity: 0.7}, 1). fadeIn ('20140901 ');
}, Function (){
MaskSource. fadeOut ('20140901 ');
});
// Match hover control section highlighting
Var sample1 = jQuery ('span. 1 ');
Var sample2 = jQuery ('span. d2 ');
Var sample3 = jQuery ('span. d3 ');
JQuery ('A. d1 '). hover (function (){
Sample1.addClass ('show '); // Add a class to a paragraph
}, Function (){
Sample1.removeClass ('show '); // remove a paragraph class
});
JQuery ('A. d2 '). hover (function (){
Sample2.addClass ('show ');
}, Function (){
Sample2.removeClass ('show ');
});
JQuery ('A. d3 '). hover (function (){
Sample3.addClass ('show ');
}, Function (){
Sample3.removeClass ('show ');
});
});

Animation function animate (params, [duration], [easing], [callback])
Params: a set of style attributes and their values that are used as animation attributes and final values.
Duration (optional): A string ("slow", "normal", or "fast") with a predefined speed, or a millisecond value indicating the animation duration (for example, 1000)
Easing (optional): name of the erased effect to be used (required by the plug-in). By default, jQuery provides "linear" and "swing ".
Callback (optional): The function executed when the animation is complete.
Fade-in effect function: fadeIn (speed, [callback])
Speed: A string ("slow", "normal", or "fast") with one of the three predefined speeds, or a millisecond value (for example, 1000) indicating the animation duration)
Callback (Optional): (Optional) function executed when the animation is completed
Fade-out function: fadeOut is interpreted as fadeIn.
Demo address: http://demo.jb51.net/html/fadefocus/index.html
Packaging: http://xiazai.jb51.net/200912/yuanma/fadefocus.rar