Question

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

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

提前致谢。

Answer 1

你需要一个游标数组，一个随机选择一个游标的函数，你需要选择元素，最后你需要使用cursor属性来改变元素的样式。像这样：

＆＃13;

// 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);

＆＃13;

#idName {
  width:300px;
  height:300px;
  background:#eee;
}

＆＃13;

<div id="idName"></div>
<hr />
<a href="javascript:location.reload(true)">Reload to see the effect again</a>

＆＃13;

编辑：

很难看到我在回复中发布的评论，所以在这里您应该如何引入自己的自定义游标：

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

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

2）或者如果他们都在同一个文件夹中，您可以执行以下操作：

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

并在arrayOfCursors中保存文件名（带扩展名）。

使用Javascript

1 个答案: