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

简介: 一、界面预览     鼠标放到右边的Tab按钮上,文字透明度降低,同时一段文字高亮显示,效果如下:     Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus/   很绚丽的效果幺! 二、实现原理     将要高亮显示的文字加上段落标记, class=”mask”的div 做为遮罩层,使此遮罩层位于文字内容之上(z-index属性,使用Jquery给段落动态添加样式类。

一、界面预览

 

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

 

  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="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-results类中显示了Tab按钮,每个按钮控制左边文字的透明度,段落文字的高亮显示。

entity-source类中有三个段落span Calss分别为 d1 d2 d3,也就是高亮文字段落。

class=mask的空div放到最后,此Div也就是一个遮罩层。

四、CSS关键代码

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

}

 

 

mask中的z-index:1 使得<div class=mask> 覆盖在左边文字内容之上。

z-nidex2又使得span段落覆盖在<div class=mask>之上。从而显示实现了段落文字高亮显示。

五、Jquery代码

 

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');

    });

});

 

动画函数animate(params, [duration], [easing], [callback])

Params:一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing (可选)要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" "swing".

callback (可选)在动画完成时执行的函数

 

淡入效果函数:fadeIn(speed, [callback])

Speed:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

callback (可选)(Optional) 在动画完成时执行的函数

 

 淡出效果函数:fadeOut解释同fadeIn

 

英文地址:http://5thirtyone.com/archives/2206

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

Demo下载:http://5thirtyone.com/sandbox/samples/fadefocus/all.zip

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

相关文章
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
61 1
|
JavaScript
jQuery文本段落展开和折叠效果
jQuery文本段落展开和折叠效果
|
JavaScript 前端开发
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
1226 0
|
JavaScript
jquery内容文本值-31
jquery内容文本值-31
96 0
jquery内容文本值-31
|
JavaScript
Jquery操作文本内容(三个方法:html()、text()、var())
Jquery操作文本内容(三个方法:html()、text()、var())
|
Web App开发 JavaScript 前端开发
用jQuery向div中添加Html文本内容
前台代码:   function PoeviewExcel() { $.ajax( { url: "send/index", type: "post", success: f...
1012 0
|
JavaScript 前端开发
推荐20款基于 jQuery & CSS 的文本效果插件
  jQuery 和 CSS 可以说是设计和开发行业的一次革命。这一切如此简单,快捷的一站式服务。jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件。
1440 0
|
前端开发 JavaScript 测试技术
优秀的 jQuery 文本输入框自动完成 & 自动提示插件
  文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。
1244 0
|
JSON 安全 JavaScript
JQuery:将文本转化成JSON对象应注意的问题
在JQuery的许多方法中,很多方法的参数可以传入一个JSON对象,比如Ajax方法的第二个参数。怎么将文本转化成JSON对象,需要注意以下问题: 1)$.parseJSON方法返回的是一个字符串,而不是JSON对象。
880 0