使背景跟随光标

Question

我试图使背景位置在"图形"的相对维度内跟随光标。JSFiddle在这里：http://jsfiddle.net/LJCkj/

它偏离了几个像素，我不知道如何将比例考虑在内。

该图形的初始背景大小为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'
            });
    });
});

这就是我目前所想的。但它已经减少了很多。有什么想法吗？

Answer 1

我认为你在错误的时间进行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);
    });
});

你的小提琴。注意，我添加了一个跨度来查看坐标。它可能也有助于您进一步开发代码。http://jsfiddle.net/LJCkj/2