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

发布时间：2018-08-18 10:56:33 所属栏目：业界来源：站长网

导读：一、界面预览鼠标放到右边的Tab按钮上，文字透明度降低，同时一段文字高亮显示，效果如下：二、实现原理将要高亮显示的文字加上span段落标记， class=mask的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性，使用Jquery给段落动态添加样式类

　　一、界面预览

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

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

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

　　二、实现原理

　　将要高亮显示的文字加上<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.veryhuo.com/uploads/Common/jquery-1.3.2.min.js" type="text/javascript" charset="GBK"></script> <script type="text/javascript"> jQuery(document).ready(function($) { // mask source 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'); }); }); </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.veryhuo.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.veryhuo.com/">流量</a></li> <li><a class="d3" href="http://www.veryhuo.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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

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

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

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

壹号本新款 ONE XPLAY	特斯拉前 CTO 电动汽车
华硕公布新款天选3 搭	主流显卡最新场批价曝