Изменить фон при приближении мыши - PullRequest
Новая
       30

Изменить фон при приближении мыши

0 голосов
/ 12 ноября 2018

Я использую следующий скрипт, чтобы определить, когда мышь / курсор приближается к div.Хорошо, это работает, но пока я измеряю расстояние в пикселях.Я хочу измерить расстояние VH единиц. 

$('body').mousemove(function(event) {

    if (isNear($('.test-arrowRight'), 550, event)) {
        $('.test-arrowRight').css('background', 'url(www.background-url.com)');
    } else {
        $('.test-arrowRight').css('background', 'url(www.background-url.com)');
    };

});

function isNear($element, distance, event) {

    var left = $element.offset().left - distance,
        top = $element.offset().top - distance,
        right = left + $element.width() + (2 * distance),
        bottom = top + $element.height() + (2 * distance),
        x = event.pageX,
        y = event.pageY;

    return (x > left && x < right && y > top && y < bottom);

}

1 Ответ

0 голосов
/ 12 ноября 2018

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

function isNear($element, distance, event) {

    var vw = $(window).width(),
        vh = $(window).height(),
        left = $element.offset().left/vw*100 - distance,
        top = $element.offset().top/vh*100 - distance,
        right = left + $element.width()/vw*100 + (2 * distance),
        bottom = top + $element.height()/vh*100 + (2 * distance),
        x = event.pageX/vw*100,
        y = event.pageY/vh*100;

    return (x > left && x < right && y > top && y < bottom);

}
...