程序员人生网站导航

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

栏目：jquery时间：2013-10-31 02:19:05

　　一、界面预览

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

　　二、实现原理

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

　　三、HTML代码：

　　entity-results类中显示了Tab按钮，每个按钮控制左边文字的透明度，段落文字的高亮显示。
　　entity-source类中有三个段落span Calss分别为 d1 d2 d3，也就是高亮文字段落。
　　class=”mask”的空div放到最后，此Div也就是一个遮罩层。

　　四、CSS关键代码

　　类mask中的z-index:1 使得<div class=”mask”> 覆盖在左边文字内容之上。z-nidex：2又使得span段落覆盖在<div class=”mask”>之上。从而显示实现了段落文字高亮显示。

　　五、Jquery代码

　　动画函数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

　　六：最终效果：

<!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" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/><title>Jquery高亮显示文本中重要的关键字 - Liehuo.Net</title><script src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.js" type="text/javascript" charset="GBK"></script><script type="text/javascript">jQuery(document).ready(function($) {// mask sourcevar maskSource = jQuery('.mask');jQuery('.entity-results').hover(function() {maskSource.animate({opacity:0.7},1).fadeIn('750');}, function() {maskSource.fadeOut('1000');});// match hovervar 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');});});</script><style>body {font:13px helvetica,arial,sans-serif;background:#eee;color:#333;}html,body,#sample h1 {margin:0;}html,body,.entity-results {padding:0;}#sample,.entity-results a {display:block;}#sample {width:100%;}#sample,.wrapper,.entity-source .mask {background-color:#fff;}#sample {border-bottom:1px solid #ccc;text-align:center;}#sample h1 {padding:15px 10px 16px;font-size:18px;}.wrapper,.entity-source,.entity-source span.show {position:relative;}.wrapper,.content img {border:1px solid #ccc;border-left-color:#aaa;border-bottom-color:#aaa;}.wrapper {width:520px;margin:60px auto;padding:25px 0 10px;}a {color:#900;text-decoration:none;background:#fff0f0;}a,.entity-source span {padding:0 2px;margin:0 -2px;}a:hover {background:#ffd8d8;}.content {width:360px;margin:0 0 0 20px;}.content h2 {font-size:21px;margin:0 0 10px;}.content p {margin:0 0 15px;line-height:18px;}.content img {float:left;padding:2px;margin:4px 10px 0 0;}.entity-results {float:right;list-style:none;margin:0 -10px 0 0;}.entity-results li {margin-bottom:2px;}.entity-results a {background:#900;color:#eee;line-height:28px;width:120px;padding-left:7px;}.entity-results a:hover {background:#5c0000;}.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;}</style></head><body><div id="sample"><h1>Jquery高亮显示文本中重要的关键字<a href="http://www.wfuyu.com/">(网)</a></h1></div><div class="wrapper"><ul class="entity-results"><li><a class="d1" href="http://alexa.liehuo.net">排名</a></li><li><a class="d2" href="http://www.wfuyu.com/">流量</a></li><li><a class="d3" href="http://www.wfuyu.com/news/">网页</a></li></ul><div class="content"><h2>迎圣诞与新年网Alexa冲一万</h2><div class="entity-source"><P>网(LieHuo.Net)消息 <span class="d1">喜迎圣诞与新年，网今日排名达到12,426，直冲一万以内，长久以来，有很多朋友在问我网到底有多少流量？</span>按Chinaz显示的IP和PV的估计值，网的日IP在5万左右，<span class="d2">我可以很负责的告诉大家：站长站的估计值差不多，目前各个频道的IP总和约：4.6万左右，PV大概8万多。</span></P><P align=left>　　<span class="d3">我们一直在努力的为网页设计、WEB开发和网站运营提供动力！</span></P><div class="mask"></div></div></div></div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

　　英文地址：http://5thirtyone.com/archives/2206

　　翻译作者：http://www.cnblogs.com/ywqu/

------分隔线----------------------------

上一篇 企业如何在互联网上推广产品

下一篇 wifi共享精灵怎么用

------分隔线----------------------------