テキストでも画像でもルーペのように拡大できるjQueryのコード

Ads
jQuery

よくある拡大鏡を実装するスクリプト
です。マークアップも楽で、コード
も少量で済むので参考にしました。
そんなに多用するUIではありませんが、
便利は便利なので覚えておきたいです。

方法が好みだったのでメモ的に。いわゆるルーペ的なを実装。

Sample

jQueryを使います。

ドラッグで動かします。CSS-Tricksでもだいぶ前にプラグインを作ってました。こちらはクローンを自分で用意する、というものでしたが、今日のコードは指定したセレクタ内のDOM要素のクローンを作成してオリジナルの上にレイヤーとして重ねてCSSで部分的に表示、JSでドラッグ出来る様にすると拡大されたように見える、という仕組みっぽいので、マークアップは普通でOKです。


CSSを外すと、クローンが作られているのがわかります。

IE6も含め、殆どのブラウザで動作するみたい。ただ、border-radiusと相性悪いそうです。

実装が楽なので気に入りました。以下を参考にしました。

Magnifying Glass

タイトルとURLをコピーしました