带有 Javascript 的随机光标图像

Posted

技术标签:

【中文标题】带有 Javascript 的随机光标图像【英文标题】:Random Cursor Images with Javascript 【发布时间】:2016-03-10 22:38:56 【问题描述】:

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

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

提前致谢。

【问题讨论】:

您愿意分享一些代码吗? 我很困惑。每次页面加载时都需要一个新光标,还是每次将鼠标悬停在 div 上时都需要一个新光标? 我希望每次页面加载时在 div 上都有一个新的光标。 【参考方案1】:

您需要一个光标数组,一个随机选择一个的函数,您需要选择元素,最后您需要使用光标属性更改元素的样式。像这样的:

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

只需将文件名(带扩展名)保存在arrayOfCursors

【讨论】:

非常感谢您如此快速准确地回答!我自己在javascript中尝试过,但我无法弄清楚:如何通过我自己的文件夹中的svg图像更改默认光标符号。我想我必须将我的文件名放在 arrayOfCursors 中,然后指明路径?但是在哪里? 看看这个:css-tricks.com/almanac/properties/c/cursor ...您可以像这样["cursor: url(images/my-cursor.png), auto", "cursor: url(images/other-cursor.png), auto"] 将它们保存在arrayOfCursors 中,或者如果它们都在同一个文件中,您可以执行以下操作: el.style.cursor = "cursor: url(images/" + random(arrayOfCursors) + ".png), auto"; 并将文件名保存在arrayOfCursors 中。

以上是关于带有 Javascript 的随机光标图像的主要内容,如果未能解决你的问题,请参考以下文章

带有光标适配器滚动问题的android列表视图

使用 JavaScript 模拟光标随机移动端

使用 JavaScript 模拟光标随机移动端

使用javascript创建带有图像标签的数组

不移动鼠标光标时Java动画口吃

JS:飞行随机物体(图像)