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

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  2. CSS3 3D Text Plugin for jQuery
  3. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  4. jQuery LoadingOverlay

    JavaScript

    多彩なローディング画面を実装できる「jQuery LoadingOverlay」

    jQuery LoadingOverlayは、カスタマイズ性に優れた多…

  5. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  6. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP