javascript - 通过鼠标指针的位置更改来更改文本？

Question

我正在尝试编写一个我想放入我的 html 网站的脚本。这个脚本的作用是它随着鼠标光标位置的变化而改变文本。例如。如果用户在 (x,y)=(1,1) 上，则将显示一些文本，而如果在 (x,y)=(2,2) 上，将显示一些其他随机文本。

var text = [ 'I am human.']

我不确定如何将其连接到鼠标事件。就像指针移动一样，显示文本列表中的任何随机文本。任何人都可以提供代码吗？真的会帮助我。谢谢你！

Answer 1

绑定mousemove上window什么的，然后在事件对象上使用screenX//// etc 。screenYclientXclientY

一个简单的演示：

var $message = $('#message');

$(window).on('mousemove', function(e) {
    if(e.clientX > e.clientY) {
        $message.text('top right triangle');
    } else {
        $message.text('bottom left triangle');
    }
});

HTML：

<div id="message">Move the mouse.</div>

http://jsfiddle.net/qjtnd/

Answer 2

由于您使用的是 JQuery，您可以只使用鼠标移动功能，如果您想要效果，您可以使用 JQuery 的animate。

Javascript：

$(document).mousemove(function(){
   var randText = text[Math.floor(Math.random()*text.length)];
   var div = $("#textDiv");
   div.stop().animate({"opacity": "0"}, 100, function(){
       $(this).html(randText);
       $(this).stop().animate({"opacity": "1.0"}, 100);
   });
});

HTML：

<div id="textDiv"></div>

Answer 3

var text = [ 'I am human.'
            , 'Some text here.'
            , 'I love technology.'
            , 'You are a good person'
            ]
$(document).mousemove(function(event) {
   var randomItem = text[Math.floor(Math.random()*text.length)];
    alert(randomItem);
});

请参阅http://jsfiddle.net/2raaa/