JavaScript/jQuery: 虫眼鏡のように画像の一部を拡大する

説明文の表示ライブデモを見る▶

ようこそ「JavaScript/jQuery」へ...

JavaScript/jQuery»記事(Article010) ◀前の記事次の記事▶

JavaScript/jQueryで虫眼鏡のように画像の一部を拡大する (Article010)

HTML/CSS、JavaScript/jQuery、Accessなどの操作手順などを説明するとき、画像を貼付することがあると思います。画像が小さいときは縮小せずにそもまま貼付できますが、大きな画像などは縮小して貼付することになります。本サイトでも[全記事の閲覧]ページで画像を縮小して表示しています。「全記事の閲覧」ページでは画像をクリックして拡大表示します。ここでは画像の全部を拡大表示するのではなく、虫眼鏡のように画像の一部だけ拡大表示する方法を解説します。

作成手順

VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article010.aspx」を作成します。 Webフォームのヘッダータグ内「<head>...</head>」にSTYLEタグを追加して次のようなCSSを入力します。 CSSクラス「magGlass」では虫眼鏡で拡大する画像(イメージ）の幅(width)を定義します。 CSSクラス「img-magnifier-glass」では虫眼鏡を定義しています。虫眼鏡の輪郭「赤」を変更したいときは「border: 3px solid #ff0000;」の色を変えます。たとえば、輪郭を緑にしたいときは「border: 3px solid #00ff00;」のように書き換えます。虫眼鏡のサイズを変更するときは「width:100px; height:100px」を書き換えます。
```
Article010.aspx:

<style>
    .magGlass{
        width: 350px;
        padding: 35px 35px;
    }

    * {
        box-sizing: border-box;
    }

    .img-magnifier-container {
        position: relative;
    }

    .img-magnifier-glass {
        position: absolute; 
        border: 3px solid #ff0000;  
        border-radius: 50%;
        cursor: none;
        width: 100px;
        height: 100px;
    }
</style>
```

Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを取り込みます。ここではjQuery 3.6.0のライブラリーを取り込んでいます。さらにSCRIPTタグを追加したら次のようなJavaScript/jQueryのコードを入力します。 jQueryの「 $('img.magGlass').each(...)」ではIMG要素のClass属性に「magGlass」が設定されているすべてのIMG要素を処理しています。「this.complete」では画像(イメージ)のロードが完了しているかどうか調べています。完了しているときはmagnify()関数を呼び出します。画像のロードが未完のときは「addEventListener()」で「load」完了イベントを登録します。そして画像のロードが完了したらmagnify()関数を呼び出します。関数magnify()の引数にはIMGの要素と拡大倍率を指定します。ここでは「3」を指定しています。倍率を変えるときは虫眼鏡のサイズも変える必要があります。


Article010.aspx:

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<script type="text/javascript">

    // jQuery Document Ready Event...
    $(function () {

        $('img.magGlass').each(function (index, item) {
            if (this.complete) {
                magnify(this, 3);
            } else {
                this.addEventListener('load', enableMagnify, false);
            }
        }); 
       
        function enableMagnify(e) {
            magnify(e.currentTarget, 3);
        }
    });

    function magnify(element, zoom) {     
        var img, glass, w, h, bw;        

        img = $(element)[0];
        glass = $('<div class="img-magnifier-glass">')[0];
        $(img).before(glass);          

        glass.style.backgroundImage = 'url("' + img.src + '")';
        glass.style.backgroundRepeat = 'no-repeat';
        glass.style.backgroundSize = (img.width * zoom) + 'px ' + (img.height * zoom) + 'px';  

        bw = 3;
        w = glass.offsetWidth / 2;
        h = glass.offsetHeight / 2;

        glass.addEventListener('mousemove', moveMagnifier);
        img.addEventListener('mousemove', moveMagnifier);

        glass.addEventListener('touchmove', moveMagnifier);
        img.addEventListener('touchmove', moveMagnifier);

        function moveMagnifier(e) {
            var pos, x, y;
            e.preventDefault();
            pos = getCursorPos(e);
            x = pos.x;
            y = pos.y;
            if (x > img.width - (w / zoom)) { x = img.width - (w / zoom); }
            if (x < w / zoom) { x = w / zoom; }
            if (y > img.height - (h / zoom)) { y = img.height - (h / zoom); }
            if (y < h / zoom) { y = h / zoom; }
            glass.style.left = (x - w) + 'px';
            glass.style.top = (y - h) + 'px';
            glass.style.backgroundPosition = '-' + ((x * zoom) - w + bw) + 'px -' + ((y * zoom) - h + bw) + 'px';
        }

        function getCursorPos(e) {
            var a, x = 0, y = 0;
            e = e || window.event;
            a = img.getBoundingClientRect();
            x = e.pageX - a.left;
            y = e.pageY - a.top;
            x = x - window.pageXOffset;
            y = y - window.pageYOffset;
            return { x: x, y: y };
        }
    }

</script>

WebフォームにDIVタグを配置したらclass属性を追加して「img-magnifier-container」を設定します。 DIV内にIMGタグを追加して虫眼鏡を適用するイメージを配置します。IMGタグのsrc属性は書き換えてください。 IMGタグにclass属性を追加したら「magGlass」を設定します。id属性とalt属性は省略できます。同様の手順でimage2, image3, image4を追加します。


Article010.aspx:

<div class="img-magnifier-container">
    <img id="image1" src="●●●/hana.jpg" class="magGlass"  alt="Flower 1" />
</div>

<div class="img-magnifier-container">
    <img id="image2" src="●●●/hana2.jpg" class="magGlass" alt="Flower 2" />
</div>

<div class="img-magnifier-container">
    <img id="image3" src="●●●/hana3.jpg" class="magGlass" alt="Flower 3" />
</div>

<div class="img-magnifier-container">
    <img id="image4" src="●●●/hana4.jpg" class="magGlass" alt="Flower 4" />
</div>

操作手順

Webページに４個が画像が表示されると、それぞれの画像左上に「虫眼鏡」を示す大きな丸が表示されます。
マウスを虫眼鏡上に持っていったら拡大表示したい箇所に移動します。すると画像が拡大表示されます。同様の手順で他の画像も拡大してみてください。

Live DEMO

Go Top

JavaScript/jQuery {Article010}

JavaScript/jQueryで虫眼鏡のように画像の一部を拡大する (Article010)

作成手順

操作手順

Live DEMO