0

「図」の相対的な寸法内で背景位置をカーソルに追従させようとしています。JSFiddle はこちら: http://jsfiddle.net/LJCkj/

数ピクセルずれており、スケールを考慮する方法がわかりません。

Figure の最初の背景サイズは 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 が 1.15 である toScale よりも大きいかどうかを確認しているため、画像を再び隅に戻すことはできません。第 3 に、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 に答える