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

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

 2009-12-30 00:00:00 来源:WEB开发网   
核心提示: 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

上一页  1 2 

Tags:Jquery 高亮 显示

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