【コピペOK】jQueryのみで画像拡大機能を作る方法

2024年1月21日

画像にマウスホバーした際に、まるで拡大鏡のようなアニメーションをつけるプラグインやライブラリなどはいくつか存在しますが、今回は私が半年くらい前になんとなく作成した画像Zoom機能のJSを紹介します。

jQueryさえあれば、動作しますので、あまりよく分からないプラグインを入れたくないという方は試してみてください。
ただ、まだ改良できそうな余地はありますので、もっと良い方法が見つかったらそのたび更新致します。

また、私が作成したコードなので、お好きにコピペ、改造などで行ってもらって大丈夫です。

画像拡大機能サンプル

下の画像にマウスホバー、スマホの場合はクリックで拡大します。

コード解説

<p class="zoom__img"><img src="img01.jpg"></p>

/* 親要素からはみ出た部分は overflow: hidden で隠す*/
.zoom__img {
    overflow: hidden;
}
/* transitionでscaleとobuject-positonをアニメーション */
.zoom__img img {
    transition: transform .3s ,object-position .3s;
    width: 100%;
    height: auto;
    display: block;
}
/* hover時に画像を拡大 */
.zoom__img:hover img {
    transform: scale(2);
    position: relative;
}

$(function () {

  let clientRect //画像の位置
  let w;         //画像の幅
  let h;         //画像の高さ
  let xx;        //画像上のマウスカーソルの位置　横
  let yy;        //画像上のマウスカーソルの位置　縦
  let x;         //最終的に算出した値　横
  let y;         //最終的に算出した値　縦

  //画像の上にマウスが来たら処理開始
  $(".zoom__img").mousemove(function (e) {

    // 画像の位置を取得
    clientRect = this.getBoundingClientRect() ;
    w = this.getBoundingClientRect().width;
    h = this.getBoundingClientRect().height;

    //画像の左上から、どこにカーソルがあるかを取得
    xx = e.pageX - (clientRect.left + window.pageXOffset) ;
    yy = e.pageY - (clientRect.top + window.pageYOffset) ;

    //なんやかんやいじくりまわして、object-positionの値を取得する
    x  = ((w/2) - xx) / 2;
    y  = ((h/2) - yy) / 2;

    //object-position に算出した値を設定
    $(this).find("img").css('object-position',x +"px "+y+"px");

  });

  //画像からマウスが離れたらリセット
  $(".zoom__img").mouseout(function (e) {
    $(this).find("img").css("object-position",0,0);
  });

});