使用Javascript的随机光标图像

Random Cursor Images with Javascript

本文关键字：光标 图像 随机 Javascript 使用      更新时间：2023-09-26

我在一个简单的网页中间有一个div。当我悬停在这个div上时，我希望我的光标随机更改为一个自定义的图像。我知道如何用css设置自己的光标图像。但是，如何使用javascript使每次刷新页面时的光标图像不同呢？

这个网站展示了我想要实现的目标。当我们将图像悬停时，光标会变成一个小图标，每次刷新页面时都会有所不同。https://glossier.com/#！/

提前谢谢。

您需要一个游标数组，一个随机选择一个的函数，您需要选择元素，最后您需要使用游标属性更改元素的样式。类似这样的东西：

// The array for your cursors
var arrayOfCursors = ['pointer', 'crosshair', 'help', 'wait'];
// Returns a random element from the provided array
function random(arr){
  var num = Math.floor(Math.random() * arr.length);
  return arr[num];
} 
// Selects the element
var el = document.getElementById('idName');
// Changes the cursor
el.style.cursor = random(arrayOfCursors);
#idName {
  width:300px;
  height:300px;
  background:#eee;
}
<div id="idName"></div>
<hr />
<a href="javascript:location.reload(true)">Reload to see the effect again</a>

编辑：

很难阅读我发布的回应评论，所以下面是你应该如何引入自己的自定义光标：

1） 您可以将它们保存在arrayOfCursors中，如下所示：

["url(images/my-cursor.png), auto", "url(images/other-cursor.png), auto"]

2） 或者，如果它们都在同一个文件夹中，你可以做一些类似的事情：

el.style.cursor = "url(images/" + random(arrayOfCursors) + "), auto";

只需将文件名（带扩展名）保存在CCD_ 2中即可。

相关文章：