Сделать фоновое изображение с помощью мыши в Jquery

Question

Я нашел этот фрагмент кода и немного подправил его для моего сайта:

 var vH=jQuery('.categoryWrapper').height();
    var vW=jQuery('.categoryWrapper').width();
    var vT=jQuery('.categoryWrapper').offset().top;
    var vL=jQuery('.categoryWrapper').offset().left;
    jQuery('.categoryWrapper').mousemove(function(e){
        var ypos=e.pageY-vT;
        var xpos=e.pageX-vL;
        var y=Math.round(ypos/vW*100);
        var x=Math.round(xpos/vH*100);

        jQuery(this).css({backgroundPosition: x+'% '+y+'%'});

Однако, он не совсем делает то, что я хочу, и у меняТрудно настроить его для правильной работы.

Перейдите на http://photoshop.tutorialcraft.com и наведите указатель мыши на кнопки «Уроки Photoshop», «Вдохновение для графики» и «Загрузка графики».1011 * По сути, у меня есть файл PNG с радиальным градиентом. Я хочу, чтобы фон отслеживал мышь, но двигался немного быстрее, чем мышь.

Например, .categoryWrapper составляет 312 x 88 пикселей.Фактически фоновое изображение - 277x277. Если я перемещаю мышь через верхнюю часть .categoryWrapper, центр IMG bg должен быть примерно на 200 пикселей выше точки, где была введена мышь. По мере перемещения мыши вниз, фондолжен переместиться примерно на 200 пикселей ниже мыши (таким образом, bg img появляется и исчезает при входе и выходе). Ниже изображение должно иллюстрировать то, что я пытаюсь сделать:

Answer 1

Разве это не должно

var y=Math.round(ypos/vW*100);
var x=Math.round(xpos/vH*100);

будь таким

var y=Math.round(ypos/vH*100);
var x=Math.round(xpos/vW*100);

поскольку x - это горизонтальная (=> ширина), а y - вертикальная (=> высота) ось?

Я почти уверен, что как только вы измените это, он будет работать, как и ожидалось.

EDIT:

Вы также должны убедиться, что для vH, vW, vT и vL установлены соответствующие атрибуты элемента current , т.е.

 //Gradient Effect
jQuery('.categoryWrapper').mousemove(function(e){
    var vH=jQuery(this).height();
    var vW=jQuery(this).width();
    var vT=jQuery(this).offset().top;
    var vL=jQuery(this).offset().left;
    var ypos=e.pageY-vT;
    var xpos=e.pageX-vL;
    var y=Math.round(ypos/vH*100);
    //var x=Math.round(xpos/vW*100);
    var x=Math.round((xpos/vW*100 - 50)*15);
    jQuery(this).css({backgroundPosition: x+'% '+y+'%'});
    jQuery('#x').text(x);
    jQuery('#y').text(y);

Устанавливая их вне обработчика mousemove, они принимают значения на основе всей коллекции, возвращаемой селектором «.categoryWrapper», а не только элемента под мышью в момент mousemove