Question

当鼠标在一段时间后停止移动时，是否可以使用自定义光标并对其进行动画处理（使其变大，然后变小，然后再次变大）？我不知道这是否可以通过CSS或Javascript实现。我知道将鼠标悬停在元素上时可以使用CSS完成此操作，但是我不知道鼠标静止时是否可以完成操作。

Answer 1

您可以附加一个事件侦听器，以侦听鼠标的移动，该事件侦听器会在移动鼠标时重置计时器。如果一段时间未移动鼠标，计时器将用完并触发光标更改。再次移动鼠标时，还可以更改光标。

var timeout;
document.onmousemove = function(){
  //mouse was moved -> reset cursor
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // mouse stopped -> set cursor
  }, 1000);
}

有关实际更改光标的更完整示例，请参见以下JSFiddle： https://jsfiddle.net/7Lb1ro9u/11/

静止不动时对光标进行动画处理

1 个答案: