JavaScriptで商品画像の拡大プレビュー機能の実装 - Qiitaこの記事はVASILY DEVELOPERS BLOGにも同じ内容で投稿しています。よろしければ他の記事もご覧ください。 概要 商品画像の拡大プレビュー機能を実装したので、その実装方法について紹介します。 仕様 今回、機能を実装する上で満たさなければいけなかった仕様です。 画像をマウスオーバーした際に横に拡大プレビューを表示する 元の画像はカルーセルで表示されている 画像の大きさは予めわからない 対応ブラウザはPCのモダンブラウザ（IE11, Edge, Firefox最新版, Chrome最新版, Safari最新版） 実装方法 次の順序で実装について説明していきます。 ルーペの表示 拡大プレビューエリア 表示・非表示の切り替え カーソル移動に合わせたプレビュー箇所の変更 ルーペの表示実装 まずは、ルーペの表示部分を実装します。ルーペは商品画像に重なるように表示する必要があります。そのた
