javascript - 图像跟随光标

Question

我需要帮助尝试执行以下操作：

一：点击开始图片跟随二：再次点击停止图片三：通知用户处于两种状态中的哪一种

我的 jfiddle 代码示例如下。

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

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

谢谢

Answer 1

那这个呢：

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;   
    }
})

jsFiddle

我只是使用“标志”来启动和停止动画。

Answer 2

试试这个代码： -

小提琴链接

$(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')
        }
})  

})