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精华代码集
Jan 24 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
js日期联动示例
May 02 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
vue v-on监听事件详解
May 17 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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
?繁体转换的class
2006/10/09 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
Javascript操作URL函数修改版
2013/11/07 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
男方父母证婚词
2014/01/12 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
应届毕业生求职信
2014/05/26 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
小学工作总结2015
2015/05/04 职场文书
法制工作总结2015
2015/07/23 职场文书
2015年教师节广播稿
2015/08/19 职场文书
《窃读记》教学反思
2016/02/18 职场文书