okzoom

JavaScript

レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

okzoomは画像細部をマウスオーバーでズームすることができるjQueryプラグインです。レンズで拡大表示するような効果を演出することができます。オプションを用いることで拡大部分を円形やスクエアにすることが可能です。

okzoomの使い方

デモ

使い方は、こんな感じでセレクタに拡大したいimgを指定してオプションを設定するだけです。jQuery本体やプラグインファイルは予め読み込んでおく必要があります。

$('img').okzoom({
    width: 200,
    height: 200,
    round: true,
    background: "#fff",
    backgroundRepeat: "repeat",
    shadow: "0 0 5px #000",
    border: "1px solid black"
});

ルーペの横幅や高さを調節したり、背景、シャドウ、ボーダーなんかも設定することができます。

roundをtrueにすることでルーペが円形で表示されます。スクエアにしたい場合はfalseを指定します。

オリジナルサイズの画像を1枚で表示するにはスペースが足りなすぎる、といった時に活用できますね。コンパクトなサイズ画像を用意して、細部をチェックしたい場合はマウスオーバーで拡大させるようにすれば、限られた場所でも設置することができそうです。

okzoom

MacのATOK Padで文字のフォントサイズを変更する設定方法前のページ

Photoshopでポインター位置のRGB、CMYK、XY座標を取得する方法次のページRGB、CMYK、XY座標の取得方法

関連記事

  1. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  2. Sticky Multi Header Scroll
  3. Relocator
  4. Jqx-Media-Slider
  5. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP