使用 Javascript 更改光标图像 (CSS URL)

Question

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

这是我尝试过的：

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

我把 'test' 图片放进去看看代码是否有效，果然 'test' 图片确实按计划改变了，但光标只是停留在 'drum3.png' , 不变。我已经尝试了很多不同的方法，但无法让它工作。

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

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

Answer 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;
}

Answer 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)

使用 Javascript 更改光标图像 (CSS URL)

Change cursor image (CSS URL) using Javascript

javascript

css

cursor