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. waslidemenu
  2. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  3. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  4. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  5. Image Figure Caption effects
  6. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

最近の記事

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