正確には50pxです。コードのどこかにあることは知っていますが、あまりにも長い間見つめていたと思います。
Backstory : 画像にカーソルを合わせると拡大レンズ効果を追加する単純な jQuery プラグインを作成しています。正常に動作していましたが、コードを追加したところ、画像の上から入ると奇妙な動作を始めました。画像の上部オフセットとカーソルの pageY 値に違いがあるかどうかを確認するために firebug を使用しました。
下のリンクでは、上から移動すると時間通りにアクティブにならないことがわかります。
コード:
update: function(event) {
img.stop(); // To stop the image from constantly animating
img.lens.stop(); // Same for the lens
img.lens.leftmax = img.width + img.left;
img.lens.topmax = img.height + img.top;
img.lens.x = event.pageX - (vars.size / 2);
img.lens.y = event.pageY - (vars.size / 2);
img.lens.css({
left: img.lens.x + 'px',
top: img.lens.y + 'px'
});
console.log(img.top + ' : ' + event.pageY);
if (event.pageX >= img.lens.leftmax || event.pageY >= img.lens.topmax || event.pageX <= img.left || event.pageY <= img.top) {
img.lens.hide(); // Hide lens
if (options.caption) {
img.lens.caption.hide();
} // Hide Caption
if (options.overlay) {
methods.nooverlay();
}
// API Callback Exit
vars.onexit(img, img.lens);
} else {
// API Callback on entering
vars.onenter(img, img.lens);
if (options.overlay) {
methods.overlay();
}
methods.doMath(event); // Recalculate pos
img.lens.show(); // Show lens
img.lens.css({
backgroundPosition: img.lens.bgleft + 'px ' + img.lens.bgtop + 'px'
}); // Assign coordinates
if (options.caption) {
img.lens.caption.show(); // Show caption
img.lens.caption.x = img.lens.x + ((vars.size - img.lens.caption.outerWidth()) / 2); // Center caption
img.lens.caption.css({
left: img.lens.caption.x + 'px',
top: img.lens.y + vars.size + 'px'
}); // Assign coordinates
}
}
},
doMath: function(event) {
img.wr = img.Owidth / img.width;
img.hr = img.Oheight / img.height;
img.lens.bgleft = String(((event.pageX - img.left) * img.wr - vars.size / 2) * (-1));
img.lens.bgtop = String(((event.pageY - img.top) * img.hr - vars.size / 2) * (-1));
},
これらは、ホバー アクションを機能させる主な機能 (マップの一部) であり、問題があると思われる場所です。コードはかなり長いので、読みやすくするために、完全なプラグイン コードを見たい場合に備えて、ページをホストしている場所へのリンクを追加します。
リンクを削除しました
どこが間違っていますか?
編集:
したがって、明らかに問題の原因は、画像の親タグの親の兄弟にネストされた浮動スパン要素です。
<div class="header">
<!-- This span tag -->
<span class="note">→ If you're using IE8 or lower, you will see a square lens</span>
<h1>jQuery Images Lens Preview</h1>
<span><i>The most customizable zoom tool there is.</i> <a href="#">GET IT NOW!</a></span>
<div style="clear: both;"></div>
</div>
<div class="example">
<div class="desc">
<h3>Demonstration #1 - Basic Usage</h3>
<pre>$('img.basic').superLens();</pre>
</div>
<div class="theimages">
<img src="images/demo_img1.jpg" width="214" height="320" class="basic" />
<img src="images/demo_img2.jpg" width="214" height="320" class="basic" />
</div>
<div style="clear: both;"></div>
</div>
なぜこれが起こっているのですか?