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. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  2. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  3. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  4. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

  5. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

    RemodalというjQueryプラグインを使えば、レスポンシブに対応…

  6. no-image

    JavaScript

    水平・垂直に対応したカルーセルスライドショー「jCarousel」

    jCarouselは水平・垂直に対応したカルーセルスライドショーを実装…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP