【jQuery・更新情報】画像をフェードインさせて表示するプラグインVer1.1

1月 26, 20181月 28, 2018

今回は以前作ったプラグイン更新のお知らせをいたします。

画像をフェードインさせて表示するプラグインの更新版

以前公開しましたプラグインを更新しました。

公開ページは以下になります。
【jQuery】画像をフェードインさせて表示するプラグイン

更新内容はバグ修正になります。
・画面より大きい画像をフェードインさせた時、画像の表示位置が
　ズレてしまう

jQueryプラグインの変更ソース

画像の座標位置の取得方法を

imgTop = $(this).offset().top;
imgLeft = $(this).offset().left;

から

var rect = this.getBoundingClientRect();
imgTop = rect.top;
imgLeft = rect.left;

に変えただけです。

修正内容の詳細

絶対位置を指定して、フェードイン画像の位置を決めていたつもりですが、
そうではなかったみたいです。
【理由】
jQueryのoffsetだと相対位置を取得してしまうみたいです。
今回の場合は、フェードイン用に用意したオーバーレイ画像からの相対位置を
指定してしまいました。
取得したかった座標は、相対位置では無く、ブラウザの絶対座標位置。

修正のポイントとしては絶対位置を取得することのできるメソッドを持った、
以下のJavaScript関数を使用しました。

this.getBoundingClientRect();

参考にしたサイトは以下です。

スクロールも考慮した座標位置を取得するには
「window.pageXOffset」
「window.pageYOffset」
を使用するとも書いているのですが、今回はそれが無くても無事に作ることができました。
逆になんで出来るのだろうというところが疑問になってます。

調査しつつ、プラグインをアップデートしていこうと思います。

今回は以上！！！！