單詞在鼠標上突出顯示

您知道突出顯示單詞並添加onmouseover事件的最有效方法嗎？單詞在鼠標上突出顯示

我有文本，我想製作一些詞的解釋字段，所以當用戶把他的光標放在單詞上時，我會調用AJAX來字典和顯示他的意思。

我有兩個想法： 1）在顯示文本之前，把每個單詞放到包裝。例如：

Hello
world

但我認爲這會嚴重超載的頁面。

2）當用戶在一個區域中持續光標超過0.5秒時，我得到指針座標，計算出顯示的是什麼詞（我不知道是否可能）並進行AJAX調用。

你認爲哪個更好，更容易編碼？

來源

2013-12-13 Tigran

我不認爲2是可能的，因爲在不同的瀏覽器字體渲染之間的差異。你永遠不會知道它到底是哪一個字。我會包裝一切服務器端。或onLoad將所有內容都包含在內。在該類別的任何跨度上懸停時，ajax將會調用 –

2。但是你會面對不同瀏覽器的問題。我確實以同樣的方式實現了註釋功能。這很艱難。對於1，在事件函數定義中有一個更好的方法，您可以獲取span的內部文本，因此不需要將該字符串放入每個調用中。 –

情況1中的表現如何？很好嗎？例如，我的意思是5000個字的文字。 – Tigran

首先選中光標下的單詞，然後顯示出它的意義，檢查我的小提琴：http://jsfiddle.net/shahe_masoyan/z7nkU/1/

HTML

<div> 
     <span>This text is a test text</span> 
    </div>

的JavaScript

$('div').each(function() { 
    var $this = $(this); 
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>")); 
}); 

$('div span').hover(
    function() { 
     $(this).css('background-color','#ffff66'); 
     alert(getTheMeaningOfTheWord($(this).html())); 
    }, 
    function() { 
     $(this).css('background-color',''); 
    } 
); 

function getTheMeaningOfTheWord(word){ 

    return word+' = theMeaning'; 
}

來源

2013-12-13 12:58:20 Shahe

我是否需要刷新DOM或其他東西。我做了試用：一些並且在onmouseover工作，但懸停不了。 – Tigran

你不需要刷新任何東西，你是否在演奏小提琴？ – Shahe

@Tigran在小提琴中看到我的代碼，我沒有任何onmouseover功能我的範圍內 – Shahe

我想，我是簡單，可以做到這樣：

小提琴：http://jsfiddle.net/9d227/

HTML

<div id="yourDiv" style="Display: none;">your Text Here</div> 
<div id="yourActualDiv"></div>

JQuery的

var wordArray = $('#yourDiv').html().split(' '); 
var totalString = ""; 
for(var i=0;i<wordArray.length;i++) 
    totalString += "<span>" + wordArray[i] + " </span>"; 
$('#yourActualDiv').html(totalString); 
var ConcurrenyFlag = 0; 
$('#yourActualDiv span').mouseover(
    function() 
    { 
     if(ConcurrenyFlag == 0) 
     { 
      ConcurrenyFlag = 1; 
      // Your code here. 
      ConcurrenyFlag = 0; 
     } 
    } 
)

這樣，你只需要把你的文字放在yourDiv。 JavaScript代碼將爲您處理剩下的事情。
希望這可以幫助你。

ConcurrenyFlag將有助於減少客戶端的負載，因爲一次只能運行一個代碼部分。

來源

2013-12-13 12:49:58 P5Coder

像這樣的東西應該做一些接近你要找的東西。

$('.addWordDictionary').html('<span>'+$('.addWordDictionary').html().replace(/ {1,}/g, '</span> <span>')+'</span>');

但是，正如你所說，它可能是客戶密集型的，特別是如果有很多文本。

來源

2013-12-13 12:51:34

您可以使用刻字。JS解決這個

http://letteringjs.com/

簡化的例子：

http://jsfiddle.net/Zzxpx/

HTML：

JS：

$(".w").lettering('words');

來源

2013-12-13 12:52:38

我做了這個東西：http://jsfiddle.net/wared/eAq9k/。需要一個textarea並通過點擊而不是懸停來工作。有關getCaret()的更多詳細信息，請點擊：https://stackoverflow.com/a/263796/1636522。

<textarea readonly>Lorem ipsum</textarea>

textarea { 
    display: block; 
    width: 100%; 
    border: none; 
    resize: none; 
    outline: none; 
    margin: .5em 0; 
}

$(function() { 
    var el = $('textarea'), 
     text = el.text(); 
    el.click(function() { 
     var i = getCaret(this), 
      w = getWord(text, i); 
     $('p').text(i + ' : "' + w + '"'); 
    }); 

    // https://stackoverflow.com/a/995374/1636522 

    el[0].style.height = '1px'; 
    el[0].style.height = 25 + el[0].scrollHeight + 'px'; 
}); 

function getWord(s, i) { 
    var r = /\s/g; 
    while (i && !r.test(s[--i])) {} 
    r.lastIndex = i && ++i; 
    return s.slice(i, (
     r.exec(s) || { index: s.length } 
    ).index); 
}

來源

2013-12-13 15:26:05 leaf

單詞在鼠標上突出顯示

回答

相關問題