Light-Zoom

JavaScript

CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実装できるjQueryプラグインです。虫眼鏡のようなシンプルなルーペで、マウスを動かしながら拡大したいポイントを手軽に見ることができます。

Light-Zoom

デモ

デモでは画像にマウスオーバーすると虫眼鏡のようになり画像の細部を拡大表示してくれます。マウスを動かしながら好きな部分を拡大して見ることができるので、とても便利ですね。

細かい文字を大きく見せたり商品やプロダクトの細部をチェックさせたりと、応用次第でさまざまなシーンに活用できるのではないでしょうか?

オプションには、zoomPower、glassSizeといった項目が用意されています。デフォルト値はzoomPowerが3、glassSizeが180になります。

Light-Zoom

Bootstrap Dropdown Hoverホバーによるシンプルなドロップダウンメニューを実装できる「Bootstrap Dropdown Hover」前のページ

2枚の画像の違いを比較できるjQueryプラグイン「baSlider」次のページno-image

関連記事

  1. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  2. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  3. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

  4. Simply Modal Box
  5. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  6. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

最近の記事

  1. COMOLI ダブルレイヤー L/Sクルー
  2. メキシコ オアハカ
  3. ドリップ
  4. チェリー
  5. 温泉水99

アーカイブ

PAGE TOP