Jquery highlights important keywords in text_jquery

1. Interface preview

Put the mouse on the Tab button on the right, the text transparency will be reduced, and a section of text will be highlighted. The effect is as follows:

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

What a gorgeous effect!

2. Implementation Principle

Add the paragraph mark to the text to be highlighted, and use the div with class="mask" as a mask layer, so that the mask layer is located above the text content (z-index attribute, use Jquery to Dynamically add style classes to paragraphs
3. HTML code

Copy code The code is as follows:

• Summary


• Avatar

< ;li>Formats

Avatar (2009 film)

Avatar, also known as James Cameron's Avatar, is an American 3-D science fiction
epic film written and directed by
James Cameron, and was released on December 16, 2009 by 20th Century Fox.
The film is co-produced by < ;a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment">
Lightstorm Entertainment, and focuses on an epic conflict on Pandora< /span>,
an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting
Alpha Centauri 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 an avatar, a representation of
a real person in a virtual world.

< ;span class="d3">The film was released in 2D and 3D formats, 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.

Read the rest of the original
Wikipedia page about Avatar

Tab shown in entity-results class Buttons, each button controls the transparency of the text on the left and the highlighting of the paragraph text.
There are three paragraph span Calss in the entity-source class, namely d1 d2 d3, which are the highlighted text paragraphs.
The empty div with class="mask" is placed at the end. This Div is also a mask layer.
4. CSS key code

Copy code The 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 makes the

cover the text content on the left.
z-nidex: 2 makes the span paragraph cover the

. Thus, the display realizes paragraph text highlighting.
5. Jquery code

Copy code The code is as follows:

jQuery(document). ready(function($) {
// mask source controls the animation effect of mask
var maskSource = jQuery('.mask');
jQuery('.entity-results').hover(function( ) {
maskSource.animate({opacity:0.7},1).fadeIn('750');
}, function() {
maskSource.fadeOut('1000');
} );
// match hover controls 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 the 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 ​​as animation attributes and final values
duration (optional): a string of one of the predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (such as 1000)
easing (optional) : The name of the erasure effect to be used (requires plug-in support). By default jQuery provides "linear" and "swing".
callback (optional): function to be executed when the animation is completed
FadeIn effect function: fadeIn (speed, [callback])
Speed: a string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration (such as: 1000)
callback (optional): (Optional) Function executed when the animation is completed
Fade out effect function: fadeOut explanation is the same as fadeIn
Demo address: http://demo.jb51.net/html/fadefocus/ index.html
Package download address: http://xiazai.jb51.net/200912/yuanma/fadefocus.rar

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Let’s talk about javascript dynamically adding style rules W3C check_javascript skillsNext article：Let’s talk about javascript dynamically adding style rules W3C check_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills