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

我目前正在更新我的网站。我想在其中一页上有一个动画光标。我发现现代浏览器不支持 .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>

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

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

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

你可以使用这样的东西：

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

我无法弄清楚如何也有一个 .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>

再次感谢湿婆。没有你，我不可能解决这个问题。

我在这里问了一个相关但不同的问题：更改指针光标的 CSS URL(使用 Javascript(

相关内容

最新更新

热门标签：