First, the interface preview
The mouse is placed on the Right tab button, text transparency is reduced, while a text highlighted, the effect is as follows:
Demo Address:http://5thirtyone.com/sandbox/samples/fadefocus/
Very gorgeous effect!
Ii. Principle of realization
Add the <span> paragraph mark to the highlighted text, class= "mask" div as the mask layer, so that the mask layer is above the text content (Z-index property, use jquery to add style classes dynamically to the paragraph.
Three, HTML code
Copy Code code 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" >
Avatar (2009 film) <div class= "Entity-source" >
<p>
Avatar, also known as James Cameron's Avatar, is a American-science fiction
Epic film written and directed by <a href= "Http://en.wikipedia.org/wiki/James_Cameron" >
James Cameron</a>, and is released on December, 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 a epic conflict on Pandora</span>
A 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 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 is released in 2D and 3D Formats</span>
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, and each button controls the transparency of the left text, highlighting the paragraph text.
There are three paragraphs in the Entity-source class span calss are D1 D2 D3, which is a highlighted text paragraph.
class= "Mask" empty div to the end, this div is also a mask layer.
Four, CSS key code
Copy Code code 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 class mask makes <div class= "mask" > Overlay on the left side of the text content.
Z-nidex:2 also makes span paragraphs cover the <div class= "Mask" >. This shows the implementation of the paragraph text highlighting.
Five, jquery code
Copy Code code as follows:
JQuery (document). Ready (function ($) {
Mask Source Control Mask animation effect
var masksource = JQuery ('. Mask ');
JQuery ('. Entity-results '). Hover (function () {
Masksource.animate ({opacity:0.7},1). FadeIn (' 750 ');
}, function () {
Masksource.fadeout (' 1000 ');
});
Match Hover Control paragraph highlighting
var sample1 = jQuery (' span.d1 ');
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 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 included as animation properties and end values
Duration (optional): A string of one of the predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the length of the animation (for example: 1000)
Easing (optional): The name of the erase effect to use (requires plug-in support). The default jquery provides "linear" and "swing".
Callback (optional): Functions that are executed when the animation completes
Fade in effect function: fadeIn (speed, [callback])
Speed: A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the length of the animation (for example: 1000)
Callback (optional): (Optional) functions that are executed when the animation completes
Fade effect function: Fadeout explained with Fadein
Demo Address: http://demo.jb51.net/html/fadefocus/index.html
Package Download Address: Http://xiazai.jb51.net/200912/yuanma/fadefocus.rar
