更改指针光标的 CSS URL（使用 Javascript）答案

【问题标题】：Changing CSS URL for pointer cursor (using Javascript)更改指针光标的 CSS URL（使用 Javascript）
【发布时间】：2017-04-14 10:54:28
【问题描述】：

我昨天问了一个问题here，关于使用 javascript 定期更改光标以使其看起来具有动画效果。我得到了一个很好的答案（谢谢你湿婆！）。我现在一直在尝试获得两种不同的“动画”光标，一种用于“自动”光标，另一种用于“指针”光标。

我尝试了很多不同的方法，但就是无法解决（我必须承认，我对此完全不熟悉 - 试图改进）。这是我尝试的一种方法：

<!DOCTYPE html>
<html>
<head>

<script type = "text/javascript">   
var images = [
'assets/shared/cursors/drum1.cur',
'assets/shared/cursors/drum2.cur',
'assets/shared/cursors/drum3.cur',
'assets/shared/cursors/drum4.cur'
];

var x = 0;

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor = 'url("' + images[x] + '"), default';
} 

setInterval(displayNextImage, 250);
</script>

<script type = "text/javascript">   
var images = [
'assets/shared/cursors/point1.cur',
'assets/shared/cursors/point2.cur',
'assets/shared/cursors/point3.cur',
'assets/shared/cursors/point4.cur'
];

var x = 0;

function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.body.style.cursor:pointer = 'url("' + images[x] + '"), default';
} 

setInterval(displayNextImage, 250);
</script>

<body>

<div style="height: 1000vh; width: 1000vw;"></div>
</body>
</html>
</head>
</html>

如果可能的话，我想不使用 jQuery。

再次感谢任何帮助。

谢谢！ :)

【问题讨论】：

你想改变光标还是只改变指针光标？
普通光标已经按照我想要的方式“动画化”了。我对此很满意。我想要的是一个不同的“动画”光标，而鼠标悬停（或点击）一个链接，然后回到正常的“动画”光标。
那么你必须做类似的事情，但在每个间隔绑定一个 over 事件（删除任何已经绑定的），它将使用下一个图像

标签： javascript css cursor

【解决方案1】：

您可以尝试使用 jQuery：

var images = [
  'assets/shared/cursors/point1.cur',
  'assets/shared/cursors/point2.cur',
  'assets/shared/cursors/point3.cur',
  'assets/shared/cursors/point4.cur'
];

var x = 0;

function changeLinkCursorHoverBinding(){
  $("a").hover(function(){/*this is the mouseenter triggered function*/
    $(this).css("cursor",'url("' + images[x] + '"), default');
  }, function(){
    //handle mouseleave here if needed
  });

  x = (x === images.length - 1) ? 0 : x + 1;//put at the end to start at 0

  setTimeout(changeLinkCursorHoverBinding, 250);
}

$(document).ready(changeLinkCursorHoverBinding);//initial call of the function

编辑

或者没有 jQuery：

var images = [
  'assets/shared/cursors/point1.cur',
  'assets/shared/cursors/point2.cur',
  'assets/shared/cursors/point3.cur',
  'assets/shared/cursors/point4.cur'
];

var x = 0;

function changeLinkCursorHoverBinding(){
 var elems = document.querySelectorAll("a");
 elems.removeEventListener("mouseenter", onHover);
 elems.removeEventListener("mouseleave", offHover);

 elems.addEventListener("mouseenter", onHover);
 elems.addEventListener("mouseleave", offHover);

 x = (x === images.length - 1) ? 0 : x+1;

 setTimeout(changeLinkCursorHoverBinding, 250);
}

function onHover(){
  var elems = document.querySelectorAll("a");
  for(e in elems){
    e.style.cursor = "url('" + images[x] + "'), default";
  }//you can use the regular for loop here if you wanna
}

function offHover(){
  var elems = document.querySelectorAll("a");
  for(e in elems){
    /*handle mouseleave here*/
  }
}

我必须命名 EH 函数（并在每次调用时删除 EH），因为我不确定 addEventListener 是否会在再次调用时覆盖相同的处理程序。

编辑

对于非 jQuery 方式，您需要在您的 <body> 标签上添加 onload="changeLinkCursorHoverBinding()"： <body onload="changeLinkCursorHoverBinding()">（页面加载后的初始调用）。

【讨论】：

谢谢维维克。如果没有人有其他想法，我会试试这个，但如果可能的话，我想在没有 jQuery 的情况下这样做（对不起，我应该在我的问题中说这个）。
我将编辑我的答案以添加它的非 jQuery 版本
非常感谢维维克。我已经尝试过了，但无法让它工作。我一定只是在做一些愚蠢的事情。这是我所做的pastebin.com/Mtd5F7a7 - 你能看出我哪里出错了吗？
尝试通过for(e of elems) 或常规for 循环for(var i = 0 ; i < elems.length ; i++) 删除for(e in elems)。如果使用最后一个，则需要使用elems[i] 而不是e 来引用循环中的当前元素。
哦，删除第一个脚本部分，否则可能导致名称冲突