Question

我试图让背景位置跟随光标在＆＃39;数字的相对尺寸内。 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

按照光标制作背景

1 个答案: