开发学院网页设计JavaScript Jquery高亮显示文本中重要的关键字 阅读

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

 2009-12-30 00:00:00 来源:WEB开发网   
核心提示:一、界面预览 查看原图(大图)鼠标放到右边的Tab按钮上,文字透明度降低,Jquery高亮显示文本中重要的关键字,同时一段文字高亮显示,效果如下:Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus/很绚丽的效果幺!二、实现原理将要高亮显示的文字加上<spa

一、界面预览

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

查看原图(大图)

鼠标放到右边的Tab按钮上,文字透明度降低,同时一段文字高亮显示,效果如下:

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

Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus/

很绚丽的效果幺!

二、实现原理

将要高亮显示的文字加上<span>段落标记, class=”mask”的div 做为遮罩层,使此遮罩层位于文字内容之上(z-index属性,使用Jquery给段落动态添加样式类。

三、HTML代码

<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="http://tech.ddvip.com/2009-12/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>

1 2  下一页

Tags:Jquery 高亮 显示

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接