单词在鼠标上突出显示

您知道突出显示单词并添加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

单词在鼠标上突出显示

回答

相关问题