Курсор JavaScript действует странно - PullRequest
Новая
       10

Курсор JavaScript действует странно

0 голосов
/ 11 июня 2011

Настройка

Я создаю HTML-страницу, которая заменяет курсор на элемент div. Javascript ниже. Элемент div это просто <div id="cursor"/>. 

function fixCursor()
{
  var cPos = getCursorPosition();
  cursor.style="top:" + (cPos.y) + "; left:" + (cPos.x) + "; position:fixed; width:16px; height:16px; background-color:#DDDDDD; box-shadow: 2px 2px 4px rgba(0,0,0,.5); border:2px solid #111111; border-radius:0 100% 100% 100%;";
  return;
}

function getCursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    }
    else if (e.screenX || e.ecreenY) {
        cursor.x = e.screenX;
        cursor.y = e.screenY;
    }
    else if (e.x || e.y) {
        cursor.x = e.x;
        cursor.y = e.y;
    }
    else if (e.clientX || e.clientY) {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX;
        cursor.y = e.clientY;
    }
    return cursor;
}

Проблема

Это работает только в Opera и показывает признаки работы в IE, но не показывает курсор. На Firefox и Chrome ничего не появляется. Я не пробовал Safari, так как удалил его некоторое время назад, но, по моему опыту, его рендеринг работает во многом как Chrome.

Ответы [ 3 ]

0 голосов
/ 11 июня 2011

В вашем коде getCursorPosition принимает объект события, e.В fixCursor вы ничего не передаете. Вероятно, вы должны fixCursor также взять объект события и передать его в getCursorPosition.Затем в вашем обработчике событий, где вы, вероятно, вызываете fixCursor, передайте объект события, переданный в ваш обработчик событий.

Кроме того, вы не можете установить style равным строке.Однако вы можете установить style.cssText.

0 голосов
/ 11 июня 2011

Планируете ли вы сделать это onmousemove?Это много накладных расходов.В любом случае, я вижу несколько проблем, но я не знаю, даст ли вам их кросс-браузерное решение, если устранить их самостоятельно.

Во-первых, давайте предположим, что вы запускаете эту функцию при mmousemove, так что у вас естьэто в вашем скрипте: 

document.onmousemove = fixCursor;

Вы должны сделать так, чтобы fixCursor () передавал объект события в getCursorPosition () следующим образом: 

function fixCursor(e)
{
  var cPos = getCursorPosition(e);
...

И вы должны явно устанавливать каждый атрибут стиля: 

cursor.style.cursor = 'none'; // Didn't see you set this
cursor.style.top = cPos.y;
cursor.style.left = cPos.x;
cursor.style.position = "fixed";

Быстрый тест показал, что это работает в Firefox, но не в IE.Установка позиции в "absolute" стала ближе в IE, но бесполезно.

EDIT: О, и кажется, что вы неправильно ссылаетесь на div "cursor" в вашей функции fixCursor ().Используйте 

var cursor = document.getElementById('cursor');
0 голосов
/ 11 июня 2011

Вы можете добавить пользовательские курсоры со свойством CSS cursor, все основные браузеры, кроме Opera , поддерживают его в той или иной степени. Если вы хотите, чтобы он работал в IE, вам нужно использовать файл курсора .cur или .ani, другие браузеры поддерживают как минимум .cur, .png, .jpg и .gif.

В качестве альтернативы этот ответ указывает на плагин jQuery , который может быть проще в использовании, чем реализация его самостоятельно.

Лично я никогда не сталкивался с ситуацией, когда у меня было для использования пользовательского курсора, я обычно просто использую .png cursor в своей таблице стилей и оставляю разумное значение по умолчанию для браузеров, которые не используют не поддерживает .png курсоры.

...