商品画像の実装をマネルと書いたが実際にはライブラリを使って表現してみたッて感じです! そのとき調べたことを議事録的にまとめたもの。 Maginifierについて 使用するライブラリ mark-rolich/Magnifier.js 公式のサンプルサイト Magnifier.js demo 他にも同じようなライブラリがあったが 一番使いやすそうだった Amazonの動きと一番近かった サンプルがわかりやすく充実をしていた ので、Magnifierを採用。 簡単なサンプル サンプルサイトに記述してあることの反復である。 使用するのはファイルは3つで、githubからDownloadしてくる。 Magnifier.js Event.js magnifier.css 一番単純な使い方 <html> <head> <title>Magnifier Sample</title> <script typ
![Amazonの商品拡大画像の実装をマネる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/07ff6bd03926c788f5a144ef394cd5472bd51d59/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9QW1hem9uJUUzJTgxJUFFJUU1JTk1JTg2JUU1JTkzJTgxJUU2JThCJUExJUU1JUE0JUE3JUU3JTk0JUJCJUU1JTgzJThGJUUzJTgxJUFFJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgyJTkyJUUzJTgzJTlFJUUzJTgzJThEJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mYWVmMWMwZjI1OWFjM2JhNjhlOTJkZDlmYjQ1ZTVjMQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa2loYXJla2F0byZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGNmN2FlM2ZkYjYzZDBlNmY3YzBjYzRhZWRmMGJiN2Y%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dbfe2c0b3a9d2045bad642e95d718e7f6)