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-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://demo.jb51.net/html/fadefocus/index.html
打包下载地址: http://xiazai.jb51.net/200912/yuanma/fadefocus.rar

(0)

相关推荐

  • jquery实现带复选框的表格行选中删除时高亮显示

    通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时,将复选框所在的行的记录删除.在这的地方,可以加个特效,单击某行的同时将该行的复选框选中,该行的背景色也高亮显示.这样给人的感觉非常好. 效果如下:  我做的这里有两个功能: 功能1.单击某行,该行的复选框被选中,同时改变一下背景色. 功能2.单击全选/全不选标签后,改变行的颜色. 两个功能我封装到了js文件中,使用的时候引入就行了. 先看

  • jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

    编辑器KindEditor官网: http://www.kindsoft.net/ 1.需要加载的JS和CSS文件为: 复制代码 代码如下: <script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> <script src="kindeditor-4.1.4/plugins/co

  • jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

    本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果.分享给大家供大家参考.具体如下: 这是一款jquery菜单特效,点击后高亮背景,个性的菜单特效.网上见到比较多的菜单了,不过像这样这么简单的方法来实现却不多见,本菜单整体简洁,点击导航栏上的任意菜单项后,该菜单项的背景变成黑色,并且鼠标移走后,仍然固定保持黑色,记住了菜单的位置. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-menu-set-focus-

  • jquery实现页面关键词高亮显示的方法

    本文实例讲述了jquery实现页面关键词高亮显示的方法.分享给大家供大家参考.具体分析如下: 通过jquery对页面搜索关键词进行高亮显示 支持中文多词页面中高亮显示 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.extend({     highlight: function(search, configs){         if(typeof(search) == 'undefined') return;         var configs =  jQ

  • 基于jquery实现导航菜单高亮显示(两种方法)

    项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • jquery(1.3.2) 高亮选中图片边框

    因为需要加载文件,建议刷新下 高亮选中图片边框 #mainboard img{ border:1px solid #cccccc; width:88px; height:31px; cursor:pointer; } $(function(){ $("#mainboard img").bind("click",function(){ $(this).css("border","1px solid red").siblings(

  • jQuery实现当前页面标签高亮显示的方法

    本文实例讲述了jQuery实现当前页面标签高亮显示的方法.分享给大家供大家参考.具体实现方法如下: function nav(name, csskey,cssvalue) { var url = window.location.pathname + window.location.search; var v1 = ""; $(name).each(function () { v1 = "/" + $(this).attr("href"); if

  • jQuery语法高亮插件支持各种程序源代码语法着色加亮

    1) highlightjs Highlight.js能够对页面中的各种程序源代码语法着色加亮.支持的语言包括: •Python •Ruby •Perl •PHP •XML •HTML •CSS •Django •Javascript •VBScript •Delphi •Java •C++ •RenderMan (RSL and RIB) •SQL •SmallTalk •Axapta •1C •Ini •Diff •DOS .bat •Bash 2) google-code-prettify

  • jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

    jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解 1.插件介绍: jquery.json-viewer.js是一款查看json格式数据的jquery插件.它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能. 2.代码演示: 1).首先引入jquery和json.viewer.js插件 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">&l

  • JQuery操作表格(隔行着色,高亮显示,筛选数据)

    查了些资料,写了4个Demo: 1. 隔行着色 复制代码 代码如下: $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 复制代码 代码如下: $("#table2 tr:contains('Fuck')").addClass("selected"); 3. 筛选数据 复制代码 代码如下: $("#filter"

随机推荐