JQuery 隐藏鼠标(如果它不移动)

如果鼠标一段时间没有移动，我正在尝试隐藏鼠标。

这是我正在使用的代码：

$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        clearTimeout(j);
        $('html').css({cursor: 'default'});
        j = setTimeout('hide();', 1000);
    });
});
function hide() {
    $('html').css({cursor: 'none'});
}

当调用 hide（）函数时，光标是隐藏的，但在一瞬间取消隐藏。任何帮助，不胜感激。

您最初的问题是鼠标的隐藏会触发mousemove，因此会立即将其重置为默认值。所以你可以像这样解决这个问题...

var justHidden = false;
$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        if (!justHidden) {
            justHidden = false;
            console.log('move');
            clearTimeout(j);
            $('html').css({cursor: 'default'});
            j = setTimeout('hide();', 1000);
        }
    });
});
function hide() {
    $('html').css({cursor: 'none'});
    justHidden = true;
}

。呜...

你在这里面临一个目前对我来说似乎无法解决的问题。也就是说，隐藏的鼠标永远不会触发mousemove，所以一旦它被隐藏，据我所知，您将无法取消隐藏它。

我会继续调查，看看是否有我缺少的解决方案。

我在 2019 年寻找应对这一挑战的解决方案时发现了这个线程。基于这里的答案和"使用 JavaScript 空闲时隐藏鼠标光标"中的答案，我提出了一个略有不同的解决方案：

var DEMO = {
  INI: {
    MOUSE_IDLE: 3000
  },
  hideMouse: function() {
    $("#game").css('cursor', 'none');
    $("#game").on("mousemove", DEMO.waitThenHideMouse);
  },
  waitThenHideMouse: function() {
    $("#game").css('cursor', 'default');
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    setTimeout(DEMO.hideMouse, DEMO.INI.MOUSE_IDLE);
  },
  showMouse: function() {
    $("#game").off("mousemove", DEMO.waitThenHideMouse);
    $("#game").css('cursor', 'default');
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这个简单明了的示例为您提供了开始隐藏鼠标的选项（DEMO.hideMouse()），也可以将其关闭（DEMO.showMouse()）。它不会在同一元素上创建多个事件。此示例演示如何将鼠标指针隐藏在div 元素#game。只需将其更改为您选择的div 或 body .

截至 2019 年 10 月全面更新的 Chrome 和 FF：它适用于两者。

我迟到了 8 年，但我有一个解决方案：

•首先从互联网上下载光标的图像或复制我的svg代码：

<svg id="cursor" width="20" height="20" viewBox="0 0 95 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.6925 46.0105L40.25 20.3516C35.25 17.4648 29 21.0733 29 26.8468L29 78.1645C29 84.9879 37.3721 88.2664 42.0056 83.2575L58.1424 65.8134C58.4853 65.4427 58.9324 65.1846 59.4249 65.0729L82.6003 59.8201C89.255 58.3118 90.6017 49.4222 84.6925 46.0105Z" fill="black" stroke="white" stroke-width="5"/></svg>

并将其添加到您的 html 文件中。

•当然，如果你想在jQuery中制作它，你需要在你的js文件上方添加这个脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

•然后添加以下内容（在您的 JavaScript 文件中）：

let timedelay = 1;
function delayCheck() {
  if (timedelay == 2) { //Here you can change this value which changes the time it takes the mouse to hide
    $('#cursor').fadeOut();
    timedelay = 1;
  }
  timedelay += 1;
}
$(document).mousemove(function() {
  $('#cursor').fadeIn();
  timedelay = 1;
  clearInterval(_delay);
  _delay = setInterval(delayCheck, 1000);
});
_delay = setInterval(delayCheck, 1000);

现在，您将在屏幕左上角看到一个光标，该光标执行您要求的操作，但它不是您的光标，要将光标替换为svg，请执行以下操作：

//in the same js file as before
$(document).mousemove(function (e) {
    $('#cursor').offset({
        left: e.clientX,
        top: e.clientY
    });
});

/* on the css */
html {
cursor: none;
}

如果它不起作用，请确保将 jquery 文件放在您编写的文件上方。我希望我帮助了某人！您可能想检查这是否真的有效，这是演示。（对不起，如果我的英语不好，我是意大利语）。

（提示）您会注意到有两个相同的函数，如果要合并它们，只需将它们替换为以下内容：

$(document).mousemove(function(e) {
  $('#cursor').fadeIn();
  timedelay = 1;
  clearInterval(_delay);
  _delay = setInterval(delayCheck, 1000);
  $('#cursor').offset({
    left: e.clientX,
    top: e.clientY
  });
});

。呜...

相关内容

最新更新

热门标签：