javascript - 画像はカーソルに追従します

Question

次のことをしようとするのに助けが必要です:

1: 1 回クリックすると画像が開始されます 2: もう一度クリックすると画像が停止します 3: ユーザーが 2 つの状態のどちらにいるかを通知します

私のjfiddleコードの例は以下です。

$(document).mousemove(function (e) {
    $("#giraffeImg").stop().animate({
        left: e.pageX,
        top: e.pageY
    });
});

http://jsfiddle.net/sure1thing/5q8zH/4/

ありがとう

Answer 1

このコードを試してください:-

フィドルリンク

$(document).ready(function(){
        var count = 0,
        anim = function(e){
        $("#giraffeImg").stop().animate({left:e.pageX,      top:e.pageY});
    }


    $(this).click(function(e){
        count += 1;

        if(count % 2){
        console.log('Animation started')

        $(this).on('mousemove',anim);  

        }else{
         $(this).off('mousemove', anim);

         console.log('Animation finished')
        }
})  

})

Answer 2

これはどうですか：

var follow = false;
$(document).on('mousemove', function(e)
{
    //console.log(e.pageX);
    if(follow)
    {
        //alert('follow true');
        $('#image').animate({
            left: e.pageX,
            top: e.pageY
        }, 0)
    }
})

$(document).click(function()
{
    if(follow)
    {  
        follow = false; 
    }
    else
    {
        follow = true;   
    }
})

jsフィドル

「フラグ」を使用してアニメーションを開始および停止するだけです。