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

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

javascript css

使用Javascript更改光标图像（CSS URL）,javascript,css,cursor,Javascript,Css,Cursor,我目前正在更新我的网站。我想在其中一页上有一个动画光标。我发现现代浏览器不支持.ani格式或动画GIF，因此我有一个想法，我可以在较旧的浏览器中使用.ani格式，在现代浏览器中使用.png光标，可以使用javascript进行更改以下是我尝试过的： <!DOCTYPE html> <html> <head> <body background="example.gif"> <style type="text/css" id="cursor

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


正文{cursor:url（'assets/shared/cursors/drum3.ani'），url（'assets/shared/cursors/drum3.png'），默认；}
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.getElementById（“游标”）.body image[x]；
}
函数startTimer（）{
设置间隔（displayNextImage，400）；
}
var图像=[]，x=-1；
图像[0]={cursor:url（'assets/shared/cursors/drum.ani'），url（'assets/shared/cursors/drum1.png'），默认值；}；
图像[1]={cursor:url（'assets/shared/cursors/drum.ani'），url（'assets/shared/cursors/drum2.png'），默认值；}；
图像[2]={cursor:url（'assets/shared/cursors/drum3.ani'），url（'assets/shared/cursors/drum3.png'），默认；}；
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.getElementById（“test”）.src=images[x]；
}
函数startTimer（）{
设置间隔（displayNextImage，400）；
}
var图像=[]，x=-1；
图像[0]=“资产/shared/cursors/drum1.png”；
图像[1]=“资产/shared/cursors/drum2.png”；
图像[2]=“资产/shared/cursors/drum3.png”；

我把“test”图像放进去，看看代码是否正常工作，并且可以肯定的是，“test”图像确实按照计划发生了变化，但光标只停留在“drum3.png”上，没有变化。我试过很多不同的方法，但都没能成功

如果可能的话，我希望避免使用JQuery

非常感谢您的帮助。谢谢大家!

您可以使用以下内容：

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

var图像=[
'http://lorempixel.com/21/21/',
'http://lorempixel.com/22/22/',
'http://lorempixel.com/23/23/'
];
var x=0；
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.body.style.cursor='url（'+images[x]+'），默认值'；
}
设置间隔（displayNextImage，400）
html，正文{
身高：100%；
}
身体{
游标：url（'http://lorempixel.com/20/20/",违约;；
}
我不知道如何同时使用.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>


变量图像=[
'资产/共享/游标/drum1.cur'，
'资产/共享/游标/drum2.cur'，
“资产/共享/游标/drum3.cur”，
“资产/共享/游标/drum4.cur”
];
var x=0；
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.body.style.cursor='url（'+images[x]+'），默认值'；
} 
设置间隔（displayNextImage，250）；

再次感谢你，湿婆。没有你我不可能解决这个问题
我问了一个相关但不同的问题：
太好了！非常感谢你。刚试过，似乎效果很好！