使用 Javascript 更改光标图像（CSS URL）答案

【问题标题】：Change cursor image (CSS URL) using Javascript使用 Javascript 更改光标图像（CSS URL）
【发布时间】：2017-09-09 16:24:52
【问题描述】：

我目前正在更新我的网站。我想在其中一个页面上有一个动画光标。我发现现代浏览器不支持 .ani 格式或动画 gif，所以我想我可以为旧版浏览器使用 .ani 格式，而现代浏览器有一个使用 javascript 更改的 .png 光标。

这是我尝试过的：

<!DOCTYPE html>
<html>
<head>

<body background="example.gif">

<style type="text/css" id="cursor"> body {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum3.png'), default;} </style>

<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("cursor") .body images[x];
}

function startTimer() {
setInterval(displayNextImage, 400);
}

var images = [], x = -1;
images[0] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum1.png'), default;};
images[1] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum2.png'), default;};
images[2] = {cursor: url('assets/shared/cursors/drum.ani'), url('assets/shared/cursors/drum3.png'), default;};
</script>


<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("test") .src = images[x];
}

function startTimer() {
setInterval(displayNextImage, 400);
}

var images = [], x = -1;
images[0] = "assets/shared/cursors/drum1.png";
images[1] = "assets/shared/cursors/drum2.png";
images[2] = "assets/shared/cursors/drum3.png";
</script>

</head>

<body onload="startTimer()">

<img id=test src="assets/shared/cursors/drum3.png">

<div style="height: 1000px; width: 1000px;"></div>

</body>
</html>

我将“测试”图像放入以查看代码是否正常工作，果然“测试”图像确实按计划更改，但光标只是停留在“drum3.png”，没有改变。我尝试了很多不同的方法，但无法让它发挥作用。

如果可能的话，我想避免使用 JQuery。

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript css cursor

【解决方案1】：

你可以这样使用：

var images = [
  'http://lorempixel.com/21/21/',
  'http://lorempixel.com/22/22/',
  'http://lorempixel.com/23/23/'
];

var x = 0;

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

setInterval(displayNextImage, 400);

html, body {
  height: 100%;
}

body {
  cursor: url('http://lorempixel.com/20/20/'), default;
}

【讨论】：

太棒了！太感谢了。刚刚试了一下，好像效果很好！

【解决方案2】：

我不知道如何也有一个 .ani 后备光标，所以我将我的 .png 文件更改为 .cur 文件，这在新旧浏览器中都可以使用。所以，代码最终看起来像这样：

    <!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>

<body>

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

再次感谢湿婆。没有你，我无法解决这个问题。

我在这里问了一个相关但不同的问题：Changing CSS URL for pointer cursor (using Javascript)

【讨论】：