谷歌翻譯突出顯示效果

Question

我翻遍了一個代碼，當我懸停（或點擊）另一個文本時，它會突出顯示一段文字。

例如，如果我有文字'Je suis ici。我在這裏'，當我將這個詞懸停在這裏時，我會在'here'和'ici'這個單詞上有一個黃色的bachground。所以我可以證明這裏的這個詞是法語單詞「ici」的英語核心。

事情是谷歌翻譯的用途：http://translate.google.com/

在此先感謝您的任何建議！ Dana。

Answer 1

谷歌翻譯的做法是將句子中的每個單詞拆分爲單獨的具有匹配類的<span>標籤。然後可以通過JavaScript中的DOM訪問這些內容 - 通過使用諸如JQuery之類的框架很容易。

例如，您可以附加mouseover()函數以突出顯示當前懸停的單詞。

我不能給你一個完整的例子 - 你需要想出一個出發點並從那裏開發你的解決方案。

Answer 2

這使用jquery庫，並從this answer on SO大量借入到related question。

它能做什麼是段落標記（<p>）分手每個單詞，並用<span>標籤與類的highlightable把它包起來，然後懸停附加一個事件到<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>