Jquery highlights Important keywords in text _jquery

Source: Internet
Author: User

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&gt, 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.