当前位置：模板网首页 > 特效插件 > 文字特效 > jQuery高亮显示网页关正文

jQuery高亮显示网页关键词

作者：网页模板

大小：0MB

点击次数：

发布时间：2014-07-02 15:10

分享到：

特效介绍

jQuery高亮显示网页关键词，当您在输入框输入想要搜索的字母时，下面的文字，凡是与这个字母或单词相同，就会自动高亮显示。很实用的一款插件。运行下面代码查看效果：

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery高亮显示网页关键词-网页模板</title> <style type="text/css"> .highlight { background-color: #fff34d; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 3px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */ } .highlight { padding:1px 4px; margin:0 -4px; } </style> </head> <body> Search: <input type="text" id="text-search" /> <p><b>In the Orient young bulls are tested for the fight arena in a certain manner. Each is brought to the ring and allowed to attack a picador who pricks them with a lance. The bravery of each bull is then rated with care according to the number of times he demonstrates his willingness to charge in spite of the sting of the blade. Henceforth will I recognize that each day I am tested by life in like manner. If I persist, if I continue to try, if I continue to charge forward, I will succeed. </p> (Text from Wikipedia) <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript"> jQuery.fn.highlight = function(pat) { function innerHighlight(node, pat) { var skip = 0; if (node.nodeType == 3) { var pos = node.data.toUpperCase().indexOf(pat); if (pos >= 0) { var spannode = document.createElement('span'); spannode.className = 'highlight'; var middlebit = node.splitText(pos); var endbit = middlebit.splitText(pat.length); var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); skip = 1; } } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) { for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); } } return skip; } return this.each(function() { innerHighlight(this, pat.toUpperCase()); }); }; jQuery.fn.removeHighlight = function() { function newNormalize(node) { for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { var child = children[i]; if (child.nodeType == 1) { newNormalize(child); continue; } if (child.nodeType != 3) { continue; } var next = child.nextSibling; if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(function() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); newNormalize(thisParent); }).end(); }; </script> <script type="text/javascript"> $(function() { $('#text-search').bind('keyup change', function(ev) { // pull in the new value var searchTerm = $(this).val(); // remove any old highlighted terms $('body').removeHighlight(); // disable highlighting if empty if ( searchTerm ) { // highlight the new term $('body').highlight( searchTerm ); } }); }); </script> </body> </html>
提示：您可以先修改部分代码再运行

注：本插件不兼容IE8及其以下版本浏览器，请在火狐等浏览器预览。

使用方法

略

本文标签：
jQuery单词高亮显示

jQuery高亮显示网页关键词效果预览 jQuery高亮显示网页关键词本地下载

jQuery高亮显示网页关键词

热门网页特效

热门PSD模板

热门CSS模板

热门网站源码

热门酷站欣赏

热门建站资源

热门建站教程

热门文章