7

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

这是我正在使用的代码：

$(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() 函数时，光标被隐藏，但稍后会取消隐藏。任何帮助表示赞赏。

4

3 回答 3

5

您最初的问题是隐藏鼠标触发器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，所以一旦它被隐藏，据我所知，你将无法取消隐藏它。

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

于 2012-05-12T15:02:50.930 回答
0

我迟到了 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
  });
});

于 2020-09-11T19:40:09.977 回答
0

当我在 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()。它不会在同一元素上创建多个事件。此示例显示将鼠标指针隐藏在#gamediv 元素上。只需将其更改为您选择的 div 或body.

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

于 2019-10-29T09:57:58.260 回答