2

私はまだjqueryに非常に慣れていないので、誰かがこれを手伝ってくれるかどうか疑問に思っていました。カーソルの位置を検出し、それに続く画像を表示する小さなスクリプトがあります。マウスボタンがクリックされた場合に画像のフォローを停止/開始する方法がわかりません。誰かが私を書き込み方向に向けるのを手伝ってもらえますか？

<!doctype html>
<head>
<title>Follow</title>
<link href="stylesheets/standard.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("html").mousemove(function (e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
$("#imgFollow").offset({left:e.pageX,top:e.pageY});
});
});
</script> 
</head>
<body>
<h1>Test</h1>
<h2 id="foxlocation"></h2>
<img id="imgFollow" width="75px" height="75px" src="images/fox.jpg"></img>
<footer>Test2</footer>
</body>
</html>
4

3 に答える 3

4 
$(document).ready(function () {
    var init = true;
    $(document).on('click', function () {
        $(this)[init ? 'on' : 'off']('mousemove', follow);
        init = !init;
    });

    function follow(e) {
        var xPos = e.pageX;
        var yPos = e.pageY;
        $("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
        $("#imgFollow").offset({
            left: e.pageX,
            top: e.pageY
        });
    }
});

フィドル

編集：

関数を初期化して開始するには、クリックをトリガーするのが最も簡単です。

    $(document).on('click', function () {
        $(this)[init ? 'on' : 'off']('mousemove', follow);
        init = !init;
    }).trigger('click');

フィドル

于 2013-03-21T21:25:49.067 に答える
0

これを試して！

$(document).ready(function() {
    $("html").mousemove(function (e) {
        follow(e);
    })
    .click( function () {
        var foo = $.data( this, 'events' ).mousemove;
        if(typeof foo = 'function') {
          $(this).off('mousemove');
        } else {
          $(this).mousemove( function (e) {
            follow(e);
          });
        }
    });
});

function follow(e){
  var xPos = e.pageX;
  var yPos = e.pageY;
  $("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
  $("#imgFollow").offset({left:e.pageX,top:e.pageY});
}
于 2013-03-21T21:35:35.517 に答える
0

次に例を示します。LIVE EXAMPLE

私のソリューションでは、画像はページの読み込み直後にユーザーの操作なしでマウスをフォローしています

CSSプロパティを使用しています

#imgFollow{
    position:absolute;
}

そしてあなたのコード.css()は.offset()

$(document).ready(function () {
    $(window).mousemove(function (e) {
        var xPos = e.pageX;
        var yPos = e.pageY;
        $("#foxlocation").html("The fox is at: " + xPos + ", " + yPos);
        $("#imgFollow").css({
            left: e.pageX,
            top: e.pageY
        });
    });
});
于 2013-03-21T21:28:52.350 に答える