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 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
JavaScript函数模式详解
Nov 07 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 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抽象工厂模式(Elgg)
2010/03/21 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php进程间通讯实例分析
2016/07/11 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
js left,right,mid函数
2008/06/10 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
英文简历自荐信范文
2013/12/11 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
学习经验演讲稿
2014/05/10 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
学校三节实施方案
2014/06/09 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书