0

我正在尝试使背景位置在“图形”的相对尺寸内跟随光标。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'
            });
    });
});

是我到目前为止所想的。但它偏离了很多。有任何想法吗？

4

1 回答 1

2

我认为您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

于 2013-08-14T19:30:10.253 回答