如何解决谷歌翻译器突出显示效果
| 我到处寻找代码,当我将鼠标悬停(或单击)另一个文本时,该代码将突出显示一段文本。 例如,如果我有文字'Je suis ici。我在这里,将鼠标悬停在单词“这里”时,对于单词“这里”和“ ici”将有一个黄色的背景。因此,我可以证明这里的单词是法语单词'ici \'的英语主要赞助者。 像Google翻译这样的工具:http://translate.google.com/ 在此先感谢您的任何建议! 达娜解决方法
Google翻译的方法是将句子中的每个单词分成具有匹配类的单独的“ 0”标签。然后,可以通过JavaScript中的DOM访问这些文件-最简单的方法是使用JQuery之类的框架。
例如,您可以附加一个
mouseover()
函数以突出显示当前悬停的单词。
我无法在此处提供完整的示例-您需要提出一个起点并从那里开发解决方案。
,这使用了jQuery库,并从SO上的该答案中大量借用到一个相关的问题。
它的作用是将段落标签(<p>
)中的每个单词分解,并用具有highlightable
类的<span>
标签包装,然后将悬停事件附加到<span class=\'highlightable\'>
标签。如果只想使用一个段落,则为其指定一个ID,并仅绑定到该ID中的那些项目。如果有几段,请使用一个类或多个ID。
<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
<script type=\"text/javascript\">
$(document).ready(function() {
// wrap words in spans
$(\"p\").each(function() {
$(this).text().
replace(/\\b(\\w+)\\b/g,\"<span class=\'highlightable\'>$1</span>\");
});
// bind to each highlightable span
$(\'.highlightable\').hover(
function() { $(this).css(\'background-color\',\'#ffff66\'); },function() { $(this).css(\'background-color\',\'\'); }
);
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。