Vueはシンプルな虫眼鏡効果を実装します

この記事では、参考までに、簡単な虫眼鏡効果を実現するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

<テンプレート>
    <div>
        <div class="imgMerror">
            <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()">
                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="">
                <div class="imgMask"></div>
            </div>
            <div class="bigDiv">
                <img src="/image/2017/07/26/0d6069de4916471b92da66b0da8f0ec9.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（） {
        戻る {
            
        }
    },
    メソッド: {
        入力（）{
            imgMaskDom を document.querySelector('.imgMask') とします。
            bigDivDom を document.querySelector('.bigDiv') とします。
            imgMaskDom.style.display = 'ブロック';
            bigDivDom.style.display = 'ブロック';
        },
        離れる（）{
            imgMaskDom を document.querySelector('.imgMask') とします。
            bigDivDom を document.querySelector('.bigDiv') とします。
            imgMaskDom.style.display = 'なし';
            bigDivDom.style.display = 'なし';
        },
        移動する{
            smallDivDom を document.querySelector('.smallDiv') とします。
            imgMaskDom を document.querySelector('.imgMask') とします。
            bigDivDom を document.querySelector('.bigDiv') とします。
            bigImgkDom を document.querySelector('.bigImg') にします。
 
            ev = e || window.event とします。
            左を ev.clientX - smallDivDom.offsetLeft - imgMaskDom.offsetWidth/2 とします。
            top を ev.clientY - smallDivDom.offsetTop - imgMaskDom.offsetHeight/2 とします。
            左が0以下の場合、左は0になります。
            if (left > smallDivDom.offsetWidth - imgMaskDom.offsetWidth) {
                左 = smallDivDom.offsetWidth - imgMaskDom.offsetWidth;
            }
            上端が 0 の場合、上端は 0 です。
            if(top > smallDivDom.offsetHeight - imgMaskDom.offsetHeight){
                上部 = smallDivDom.offsetHeight - imgMaskDom.offsetHeight;
            }
            imgMaskDom.style.left = left + 'px';
            imgMaskDom.style.top = top + 'px';
 
            //比率を移動します let precentX = left / (smallDivDom.offsetWidth-imgMaskDom.offsetWidth);
            precentY を top / (smallDivDom.offsetHeight - imgMaskDom.offsetHeight) とします。
            bigImgkDom.style.left = precentX * (bigDivDom.offsetWidth - bigImgkDom.offsetWidth) + 'px';
            bigImgkDom.style.top = precentY * (bigDivDom.offsetHeight - bigImgkDom.offsetHeight) + 'px';
 
        }
    },
}
</スクリプト>
 
<スタイル lang="scss">
    *{
        マージン: 0;
        パディング: 0;
    }
    .imgMエラー{
        位置: 相対的;
        パディング: 50px;
        .smallDiv{
            境界線: 1px 実線 #ccc;
            幅: 360ピクセル;
            高さ: 360ピクセル;
            位置: 相対的;
            左: 0;
            上: 0;
            画像{
                幅: 100%;
                高さ: 100%;
            }
            .imgマスク{
                幅: 240ピクセル;
                高さ: 240px;
                背景: #00ff98;
                不透明度: 0.5;
                カーソル: 移動;
                位置: 絶対;
                左:0;
                上: 0;
                表示: なし;
            }
        }
        .bigDiv{
            境界線: 1px 実線 #ccc;
            幅: 540ピクセル;
            高さ: 540px;
            位置: 相対的;
            左: 380ピクセル;
            上: -360px;
            オーバーフロー: 非表示;
            表示: なし;
            画像{
                幅: 600ピクセル;
                高さ: 600px;
                位置: 絶対;
                左: 0;
                上: 0;
            }
        }
    }
</スタイル>

効果画像: