Jquery高亮表现文本中重要的要害字

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

导读：一、界面预览鼠标放到右边的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/

（编辑：河北网）

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

全新iPad Pro已在途中	RGB三色光源直接成像！
零下30℃开启中国中车	首发价 1199 元，小米