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

核心提示： entity-results类中显示了Tab按钮，每个按钮控制左边文字的透明度，Jquery高亮显示文本中重要的关键字(2)，段落文字的高亮显示，entity-source类中有三个段落span Calss分别为 d1 d2 d3，四、CSS关键代码.entity-source,.entity-

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-nidex：2又使得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