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


Posted in Javascript onDecember 24, 2009

一、界面预览

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="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.3water.com/html/fadefocus/index.html
打包下载地址: http://xiazai.3water.com/200912/yuanma/fadefocus.rar
Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
JQuery 写的个性导航菜单
Dec 24 #Javascript
JavaScript中出现乱码的处理心得
Dec 24 #Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 #Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 #Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 #Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 #Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 #Javascript
You might like
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python批量修改图片大小的方法
2018/07/24 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python tkinter组件摆放方式详解
2019/09/16 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
委托公证书范本
2014/04/03 职场文书
保研推荐信格式
2015/03/25 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
js实现自动锁屏功能
2021/06/02 Javascript