menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/14
  • JQuery

OKzoom.js マウスオーバーでルーペ(虫眼鏡)をあてたみたいにズームできるJQuery

OKzoomはマウスオーバーでルーペ(虫眼鏡)をあてたみたいにズームできるJQueryです。一般に拡大できるJQueryはたくさんありますが、ルーペ(虫眼鏡)のように円形でレンズが拡大するような効果のプラグインなので他のものとは一味違った演出ができます。
okzoom

使用方法

ダウンロード

・okzoom.js(github)

準備するファイル

・jquery.js
・okzoom.js

外部ファイルの読み込み

head内へ以下を追加します。

JavaScript

要素を指定。ルーペのサイズやスタイルを設定。

HTML

画像に任意のIDを付けます。。

CSS

コンテンツの幅、高さは好みで設定してください。
実際の画像より小さく指定。

その他

複数画像を設定するときは、「#okzoom img」のように要素の中のimgを指定してください。
下部リンクのDEMOページも複数画像です。

とても簡単に実装できるのでオススメです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11