Случайные изображения курсора с Javascript

Question

У меня есть div в середине простой веб-страницы. Когда я нахожу этот div, я хочу, чтобы мой курсор менялся случайным образом на настроенное изображение. Я знаю, как установить свой собственный образ курсора с помощью css. Но как использовать javascript, чтобы сделать это изображение курсора различным при каждом обновлении страницы?

Этот сайт показывает, чего я хочу достичь. Когда мы наводим изображение, курсор становится маленьким значком, который отличается при каждом обновлении страницы. https://glossier.com/#!/

Заранее спасибо.

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

EDIT:

Это было трудно читать комментарий я отправил в ответ, так вот как вы должны быть в состоянии принести в ваших собственных пользовательских курсоров:

1) Вы можете либо сохранить их в arrayOfCursors так:

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

2) ИЛИ Если они все в той же папке, вы могли бы сделать что-то вроде:

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

и просто сохранить имена файлов (с расширениями) в arrayOfCursors.