JavaScript

虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」を使ってみました。機能、使い方ともにシンプルで良いですね。これと似たようなプラグインは以前記事にもした「Loupe」や「jQuery Zoom」などがあります。使いどころは結構ありそうな感じなので、自分に合うものを選択して活用したいですね。以下、使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたプラグインを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.mlens-1.0.min.js"></script>

続いて、HTMLで画像を記述していきます。通常のsrc属性には表示させるサイズの画像パスを、data-big属性には拡大時のサイズの画像パスを記述します。

<div id="jqsample-wrapper">
    <img id="jqsample" src="images/img-s.jpg" alt="sample" data-big="images/img-l.jpg" />
</div>

自分のサイトに合うようにCSSで見栄えを調整してあげます。画像を括っている要素にCSSを記述します。

#jqsample-wrapper {
    position: relative;
    width: 500px;
    height: auto;
}

あとは、mlensのオプションなどをセットすればOKです。

<script type="text/javascript">
$(document).ready(function()
{
    $("#jqsample").mlens(
        {
            imgSrc: $("#jqsample").attr("data-big"),
            lensShape: "circle",
            lensSize: 180,
            borderSize: 4,
            borderColor: "#fff",
            borderRadius: 0
    });
});
</script>

オプションによって、レンズの形、サイズ、ボーダーカラーなどを変更することができます。以下、いくつかご紹介。詳しくは公式サイトをご確認下さい。

lensShape
circle か square を指定します。レンズの形を変えることができます。
lensSize
レンズのサイズです。
borderSize
レンズ周りのボーダーサイズを変更できます。
borderColor
ボーダーの色を指定できます。

というわけで、画像にマウスを置いた所を虫メガネのように拡大できるjQueryプラグイン「mlens」の使い方についてでした。以下からダウンロードできます。

これと似たプラグインで以下のようなものもあるのでよろしければこちらも合わせてどうぞ。

最近購入したガジェット達「enecycle EN06」「ELECOM MPA-AMBIRL07BK」「Lightning Micro USBアダプタ」前のページ

Macの充電のアイコンの横に割合(%)の表示を付け足すやり方次のページ

関連記事

  1. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  4. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  5. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  6. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP