使用Java脚本更改光标图像（CSS URL） [英] Change cursor image (CSS URL) using Javascript
问题描述
我当前正在更新我的网站。我想在其中一个页面上放置一个动画光标。我发现现代浏览器不支持.ani格式或gif动画，因此我想到可以将.ani格式用于较旧的浏览器，而对于现代浏览器，其.png光标会使用javascript进行更改。 / p>
这是我尝试的方法：
<！DOCTYPE html>
< html>
< head>
< body background = example.gif>
< style type = text / css id = cursor>正文{cursor：url（‘assets / shared / cursors / drum.ani’），url（’assets / shared / cursors / drum3.png’），默认；}< / style>
< script type = text / javascript>
函数displayNextImage（）{
x =（x === images.length-1）吗？ 0：x + 1；
document.getElementById（ cursor）.body images [x];
}
函数startTimer（）{
setInterval（displayNextImage，400）;
}
var images = []，x = -1;
images [0] = {光标：url（资产/共享/光标/drum.ani），url（ assets / shared / cursors / drum1.png，默认；}；
images [1] = {光标：url（资产/共享/光标/drum.ani），url（ assets / shared / cursors / drum2.png，默认；}；
images [2] = {光标：url（‘assets / shared / cursors / drum.ani’），url（‘assets / shared / cursors / drum3.png’），默认；};
< / script>
< script type = text / javascript>
函数displayNextImage（）{
x =（x === images.length-1）吗？ 0：x + 1；
document.getElementById（ test）.src = images [x];
}
函数startTimer（）{
setInterval（displayNextImage，400）;
}
var images = []，x = -1;
images [0] =资产/共享/光标/drum1.png;
images [1] =资产/共享/光标/drum2.png;
images [2] =资产/共享/光标/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。
我们非常感谢您的帮助。谢谢！
您可以使用类似这样的东西：
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] +'），默认值';} setInterval（displayNextImage，400）;
html，正文{高度：100％;} body {光标：url（'http://lorempixel.com/20/20 /'），默认设置；}
I'm currently updating my website. I wanted to have an animated cursor on one of the pages. I found out that modern browsers don't support the .ani format or animated gifs, so I had the idea that I could use the .ani format for older browsers, and for modern browsers have a .png cursor that changes using javascript.
Here's what I tried:
<!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>
I put the 'test' image in to see if the code worked at all, and sure enough the 'test' image does change as planned, but the cursor just stays at 'drum3.png', not changing. I've tried it many different ways, but can't get it to work.
If possible I'd like to avoid JQuery.
Any help is really appreciated. Thank you!
You can use something like this:
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;
}
这篇关于使用Java脚本更改光标图像（CSS URL）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
