Проблема с перемещением мыши

Question

Проблема с перемещением мыши

0

Я разработал меню Mac Style Doc. Меню doc будет отображаться, когда курсор составляет 100 пикселей снизу. Иначе меню скрыто. Теперь проблема в том, что я могу взять e.clientX и e.clientY только тогда, когда курсор неподвижен.

Есть ли способ решить это? Ниже приведен код, который я использовал для анимации.

$(window).mousemove(function (e) {
    if ((window.innerHeight - e.clientY) <= 50) {
        $('.wrap').stop(true);
        $('.wrap').animate({
            bottom: 5
        }, 1000);
    } else {
        $('.wrap').stop(true);
        $('.wrap').animate({
            bottom: -100
        }, 1000);
    }
});

Maclean Pinto 20 дек. 2013, в 11:41

Источник

1

К сведению, $(window).mousemove() обычно вызывает большую проблему с производительностью, вы должны найти другую логику, не используя ее
A. Wolff 20 дек. 2013, в 10:30
0

Я думаю, что вы должны создать невидимый <div class = "bottom-block"> для примера в нижней части с высотой 50px и использовать $ ('. Bottom-block'). Mouseover, чтобы сделать анимацию поворота, пока мышь находится в блоке
chakroun yesser 20 дек. 2013, в 10:56
0

@A. Вольф, я не мог найти другого способа сделать это. $ ('. bottom-block'). mouseover - это решение, но я бы не получил тот же стиль меню документов, который хотел
Maclean Pinto 20 дек. 2013, в 11:12
0

@MacleanPinto просто установите console.log () внутри этого обработчика и теперь проверьте вашу консоль. Это не может быть жизнеспособным решением в любом случае. Я уверен, что использование другой логики возможно, но чтобы получить лучшую помощь, вы должны предоставить рабочий пример в виде jsfiddle
A. Wolff 20 дек. 2013, в 11:17

Показать ещё 2 комментария

Теги:

jquery

css

2 ответа

0

Чтобы упростить работу, вы можете немного задержать событие, например:

var moveTimer = null;
$(window).on('mousemove', function (e) {
    clearTimeout(moveTimer);
    moveTimer = setTimeout(function () {
        // only runs when the user stops moving the mouse for 10ms
    }, 10);
});

См.: Простой прототип дока (JSFIDDLE)

tborychowski 20 дек. 2013, в 10:41

Ещё вопросы

К сведению, $(window).mousemove() обычно вызывает большую проблему с производительностью, вы должны найти другую логику, не используя ее
Я думаю, что вы должны создать невидимый <div class = "bottom-block"> для примера в нижней части с высотой 50px и использовать $ ('. Bottom-block'). Mouseover, чтобы сделать анимацию поворота, пока мышь находится в блоке
@A. Вольф, я не мог найти другого способа сделать это. $ ('. bottom-block'). mouseover - это решение, но я бы не получил тот же стиль меню документов, который хотел
@MacleanPinto просто установите console.log () внутри этого обработчика и теперь проверьте вашу консоль. Это не может быть жизнеспособным решением в любом случае. Я уверен, что использование другой логики возможно, но чтобы получить лучшую помощь, вы должны предоставить рабочий пример в виде jsfiddle

Maclean Pinto · Accepted Answer · 2013-12-20T09-41-00.000Z

Спасибо за все ваши предложения.

Потратив часы на этот вопрос, просто подумал, что я должен поделиться решением, которое найдено. Вместо того, чтобы использовать JQuery, я использовал прослушиватель событий JavaScript на плоскости и добавил функцию обратного вызова, когда условие согласовано.

Простой пример того, как добавить событие lister. Если кому-то нужен весь код, пожалуйста, дайте мне знать, я тоже добавлю.

var myListener = function (e) {

    document.body.innerHTML = 'Mouse first moved: ' + e.clientY +"---"+e.clientX
};

document.addEventListener('mousemove', myListener, false);

Ссылка на скрипку

http://jsfiddle.net/JQBmA/#&togetherjs=wUsP1yGylU

С Уважением,