Image Zoom 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 <img>タグにsrcにサムネイル、data-*の形で拡大画像を指定して、後はプラグインで初期化するだけで超簡単に次のようなズーム機能が作れます。 ECサイトなどで実装すれば、製品画像を拡大できて便利ですね 実装は次のように超カンタン 関連エントリ マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
Image Zoom 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 <img>タグにsrcにサムネイル、data-*の形で拡大画像を指定して、後はプラグインで初期化するだけで超簡単に次のようなズーム機能が作れます。 ECサイトなどで実装すれば、製品画像を拡大できて便利ですね 実装は次のように超カンタン 関連エントリ マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
zoom.js -GitHub デモページ [ad#ad-2] デモ 実装 デモ デモページではページ上のどのエレメントをクリックしてもズームイン(拡大)します。 グリーンの「Float」をクリックするとこんな感じになります。 デモページ:ズームインしたキャプチャ ズームアウト(縮小)するにはもう一度クリックするか、[ESC]キーを押します。 [ad#ad-2] 実装 「zoom.js」はjQueryなどの他のスクリプトには依存せずに、単体で実装が可能です。 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/zoom.js"></script> HTML/CSS HTMLとCSSは通常通りで構いません。 特定のエリアに適用する場合は、そのエリアが指定できるようにidなどを設けます。 JavaScript 特定の要素(例:img)のみ適用する場合は下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く