1

所以基本上我有一个在页面加载时发生的事件。它会导致图像跟随您的光标，但是在单击事件时我想禁用此事件，然后在第二次单击时重新启用鼠标跟随事件

我尝试创建一个切换变量，但它似乎冻结了我的图像。.on() 和 .off() 在这里合适吗？我阅读了文档，但对如何实现它们感到困惑

我对如何关闭我猜的事件感到困惑。

脚本

    var enabled = true;

        $(document).ready(function() {
            $(document).mousemove(function() {
                if (enabled) {
                    $("#rocket").stop().animate({left:e.pageX, top:e.pageY});
                }
            });
            $(document).click(function() {
                enabled == !enabled;
            }); 
        });

演示

4

3 回答 3

3

现场演示

var enabled = true;

$(function () {    
    var $rocket = $('#rocket');   
    $(document).mousemove(function (e) {
         if (enabled) {
                $rocket.css({left: e.pageX, top: e.pageY});
         }
     }).click(function () {
         enabled ^= 1;
     });
});

而不是animate()使用.css()

如果你真的想为你的捕捉飞船添加一个圆滑的动画：

带有“动画”的现场演示

$(function () {  

    var $rocket = $('#rocket'),
        enabled = true,
        mX =0, mY =0,
        posX =0, posY =0,
        lazy = 20; // Smooth move

    $(document).mousemove(function(e){
        mX = e.pageX;
        mY = e.pageY;  
    }).click(function(){
        enabled^=1;
    });

    intv = setInterval(function(){
        if(enabled){
            posX += (mX-posX) / lazy; // zeno's paradox equation "catching delay"
            posY += (mY-posY) / lazy;
            $rocket.css({left: posX, top: posY});
        }
    }, 10); 

});
于 2013-11-10T06:48:21.343 回答
1

我可能会尝试注册和删除处理程序，例如

$(document).ready(function () {
    function handler(e) {
        $("#rocket").css({
            left: e.pageX,
            top: e.pageY
        });
    }

    $(document).on('mousemove.cursor', handler);

    var enabled = true;
    $(document).click(function () {
        enabled = !enabled;
        if (enabled) {
            $(document).on('mousemove.cursor', handler);
        } else {
            $(document).off('mousemove.cursor');
        }

    });
});

演示：小提琴

于 2013-11-10T06:54:47.410 回答
1

以下是使您的代码正常工作的小修复：

var enabled = true;

        $(document).ready(function() {
            $(document).mousemove(function(e) {
                if (enabled) {
                    $("#rocket").stop().animate({left:e.pageX, top:e.pageY});
                }
            });
            $(document).click(function() {
                enabled = !enabled;
            }); 
        });

小提琴在这里http://jsfiddle.net/bmzyK/8/

只需在 mousemove 事件中添加参数并将 JQuery 添加到 JSFiddle。还修复了“==”错字。

于 2013-11-10T06:54:47.907 回答