「図」の相対的な寸法内で背景位置をカーソルに追従させようとしています。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'
});
});
});
私がこれまでに考え出したことです。しかし、それはかなりの量でオフになっています。何か案は?