0

HTML Web サイトに配置するスクリプトを作成しようとしています。このスクリプトが行うことは、マウス カーソルの位置の変化に合わせてテキストを変更することです。たとえば。ユーザーが (x,y)=(1,1) の場合はテキストが表示され、(x,y)=(2,2) の場合は他のランダムなテキストが表示されます。

var text = [ 'I am human.']

これをマウスイベントに接続する方法がわかりません。ポインターが移動した場合と同様に、テキストのリストからランダムなテキストを表示します。誰でもコードを提供できますか? 本当に助かります。ありがとう！

4

3 に答える 3

2

または何かにバインドmousemoveしてから、イベント オブジェクトで/ / / / などを使用します。windowscreenXscreenYclientXclientY

簡単なデモ:

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/

于 2013-05-19T16:45:06.617 に答える
1

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>
于 2013-05-19T16:48:48.680 に答える
0 
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/を参照してください。

于 2013-05-19T16:50:39.180 に答える