jQuery高亮显示文本中重要的关键字

<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) 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=”http://en.wikipedia.org/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=”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 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=”http://en.wikipedia.org/wiki/Avatar_(2009_film)”>original

                    Wikipedia page about Avatar a> p>

            <div class=”mask”>

            div>

        div>

    div>

div>

.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;

}

jQuery(document).ready(function($) {

    // 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() {

        sample1.removeClass(‘show’); //移除段落类

    });

    jQuery(‘a.d2’).hover(function() {

        sample2.addClass(‘show’);

    }, function() {

        sample2.removeClass(‘show’);

    });

    jQuery(‘a.d3’).hover(function() {

        sample3.addClass(‘show’);

    }, function() {

        sample3.removeClass(‘show’);

    });

});