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

関連記事

  1. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  2. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  3. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  4. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  5. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  6. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP