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

2016-02-19 14:36 38 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享Jquery 高亮显示文本中重要的关键字的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

打包下载一、界面预览

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

鼠标放到右边的Tab按钮上,文字透明度降低,同时一段文字高亮显示,效果如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

Demo地址:http://5thirtyone.com/sandbox/samples/fadefocus/

很绚丽的效果幺!

二、实现原理

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

将要高亮显示的文字加上span段落标记, class=”mask”的div 做为遮罩层,使此遮罩层位于文字内容之上(z-index属性,使用Jquery给段落动态添加样式类。
三、HTML代码

代码如下:
div class="wrapper"
ul class="entity-results"
lia class="d1" href="#"Summary/a/li
lia class="d2" href="#"Avatar/a/li
lia 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://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1607347.html

延伸阅读
标签: Web开发
打包下载 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,d...
C++中的 static 关键字 作者:陈厚辉 前言: 本文只是本人对C++中关于静态类型的一个总结,如错误之处,请大家帮我改正。我分两个方面来总结,第一方面主要是相对于面向过程而言,即在这方面不涉及到类,第二方面相对于面向对象而言,主要说明static在类中的作用。 一、在面向过...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titlejquery 弹出公告/title script type="text/javascript" src="http://ajax.googleapi...
标签: Web开发
关键代码: 代码如下: $(function(){ $(".tabs li").eq(0).css("background","#499AFF"); $(".tabs div").eq(0).show(); $(".tabsulli").click(function(i){ $(this).css("background","#499AFF").siblings().css("background","#ffffff"); $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); return false; }) ...
标签: Web开发
打包下载 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件—Anything...

经验教程

148

收藏

23
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部