よくある拡大鏡を実装するスクリプト
です。マークアップも楽で、コード
も少量で済むので参考にしました。
そんなに多用するUIではありませんが、
便利は便利なので覚えておきたいです。
方法が好みだったのでメモ的に。いわゆるルーペ的なを実装。
Sample
jQueryを使います。
ドラッグで動かします。CSS-Tricksでもだいぶ前にプラグインを作ってました。こちらはクローンを自分で用意する、というものでしたが、今日のコードは指定したセレクタ内のDOM要素のクローンを作成してオリジナルの上にレイヤーとして重ねてCSSで部分的に表示、JSでドラッグ出来る様にすると拡大されたように見える、という仕組みっぽいので、マークアップは普通でOKです。
CSSを外すと、クローンが作られているのがわかります。
IE6も含め、殆どのブラウザで動作するみたい。ただ、border-radiusと相性悪いそうです。
実装が楽なので気に入りました。以下を参考にしました。
