@modernstyle
Code GOD

Проблема с распознованием положения мышки в jQuery?

Я собрал в jsfiddle небольшой кусок кода, суть в том, что в пределах вертикального DIV ссылка ездит за мышкой (когда мышь ползает по этому div)

Все работает чудесно

Однако когда я переношу этот код в настоящий html все едет сикось-накось, кнопка уезжает то вниз то вверх, вобщем полный бардак. Знаний разобраться самостоятельно мне не хватает, может быть подскажете, в чем проблема?



Вот этот фидл jsfiddle.net/grammakov/tDGRc/5/
  • Вопрос задан
  • 3587 просмотров
Решения вопроса 1
UZER2006
@UZER2006
Потому что у кнопки position:absolute, и её позиция считается по таймеру и с привязкой к положению родителя. offset блока меняется, но не срабатывает событие мыши, которое изменит фактический yp.
Попробуйте, например, так
var mouseX = 0, mouseY = 0;
$(".side").mousemove(function(e){
   mouseY = e.clientY-19; 
});

// cache the selector
var follower = $("#follower");
yp = 0;
var loop = setInterval(function(){

    yp += (mouseY - yp) / 6;
    follower.css({top:yp});
    
}, 10);
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
uadeveloper
@uadeveloper
В вашем примере (и на сайте и на фидле) работает нормально, как и положено.

Вы событие вешаете на див, он его обрабатывает. Возможно вы хотите что бы див ездил независимо где находиться курсор?
Ответ написан
uadeveloper
@uadeveloper
Извеняюсь. Понял.

Просто отнимите top section от положения в диве:

follower.css({top:yp — $(".side").offset().top});
Ответ написан
uadeveloper
@uadeveloper
Вызелает потому, что у вас эта кнопка расположена в родительском елементе, а так как событие на родительский поставлено, то и все дочерние повинуются ) А так как указатель находиться над кнопкой, собитие работает.

Что бы останавливать меню в конце, то надо делать так:
alexeyshishkin.net/test/fiddle.htm

Если просто скрывать, то просто добавьте в section overflow: hidden
Ответ написан
UZER2006
@UZER2006
А настоящего кода нет? Сложно что-то конкретное посоветовать.
Разбирайтесь, на каких элементах отрабатывает событие mousemove и правильно рассчитывайте положение блока. Важно знать, что вложенность элементов, особенно комбинации position:absolute и position:relative влияют на позиционирование.
Для начала хотя бы залогайте значения положения курсора и target события. Есть большая вероятность, что всё прояснится.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы