Css 使背景跟随光标

我试图使背景位置在“图形”的相对尺寸内跟随光标。请点击此处：

它减少了几个像素，我不确定如何考虑比例

该图的初始背景大小为180%，然后悬停为115%

jQuery(function($) {
    toScale = 1.15; // The 115% on hover

    $('figure').on('mousemove', function(e) {
        el = $(this);

        w = el.width() * toScale;
        h = el.height() * toScale;

        x = e.pageX - el.offset().left - w / 2;
        y = e.pageY - el.offset().top - h / 2;

        if ((x >= toScale && x <= w) && (y >= toScale && y <= h))
            el.css({
                backgroundPosition: x+'px '+y+'px'
            });
    });
});

jQuery（函数（$）{
toScale=1.15；//悬停时的115%
$（'figure'）。在（'mousemove'，函数（e）上{
el=$（本）；
w=标高宽度（）；
h=标高高度（）*至刻度；
x=e.pageX-el.offset（）.左-w/2；
y=e.pageY-el.offset（）.top-h/2；
如果（（x>=toScale&&x=toScale&&y我认为你在错误的时间用
toScale
进行乘法运算。
此外，您正在检查x和y是否大于toScale，即1.15，因此您永远无法将图片移回角落。
第三，因为您正在检查x和y是否都有效，所以很难将其移回角点，因为一旦任何值超出边界，您就停止移动

调整后的javascript可能如下所示：

function Between(a, min, max)
{
    // return a, but bound by min and max.
    return a<min?min:a>max?max:a;
}

jQuery(function($) {
    toScale = 1.15; // The 115% on hover

    $('figure').on('mousemove', function(e) {
        el = $(this);

        w = el.width();
        h = el.height();

        x = (e.pageX - el.offset().left - w / 2) * toScale;
        y = (e.pageY - el.offset().top - h / 2) * toScale;

        x = Between(x, 0, w);
        y = Between(y, 0, h);

        el.css({
            backgroundPosition: x+'px '+y+'px'
        });

        $('span').text(x + ',' + y);
    });
});

介于（a、最小值、最大值）之间的函数
{
//返回a，但受最小值和最大值的限制。
返回amax？max:a；
}
jQuery（函数（$）{
toScale=1.15；//悬停时的115%
$（'figure'）。在（'mousemove'，函数（e）上{
el=$（本）；
w=标高宽度（）；
h=标高高度（）；
x=（e.pageX-el.offset（）.left-w/2）*toScale；
y=（e.pageY-el.offset（）.top-h/2）*toScale；
x=介于（x，0，w）之间；
y=介于（y，0，h）之间；
el.css({
背景位置：x+'px'+y+'px'
});
$（'span'）。文本（x+，'y+y）；
});
});

你的小提琴。注意，我已经添加了一个跨度来查看坐标。它可能会帮助你进一步开发代码。