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. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  2. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  3. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  4. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

  5. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP